如何使用下拉列表选项（Javascript，HTML）默认禁用下拉列表

Question

问候伙计们，

我是这种编码的新手，需要帮助。

我想让下拉列表 B 默认禁用。

例如，在下拉列表 A 中有“是”、“否”。 如果用户选择“是”。 然后下拉列表 B 将可供选择。 但默认情况下，下拉列表 A 始终被选中 =“否”。

下拉列表 B（默认禁用）

<label for="new">New staff join Date: </label>
              <form method="post" action="?">
              <select name="ckb" id="ck1">
              <option disabled selected="select">-----Select Cut-----</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>

非常感谢您的帮助：D

Answer 1

下拉列表 B 的Display none如下所示：

<select id="B" style="display: none;">

并且您应该为dropdown A定义一个更改事件，并且在此事件中应该检查dropdown A选定值； 如果是Yes从dropdown B的样式中删除display: none ，否则添加display: none 。

Answer 2

您可以使用 JavaScript 检查下拉列表 A 的值，并根据 A 的值将disabled属性添加到下拉列表 B。

这个 Stackoverflow 线程展示了如何从下拉列表中选择一个值的方法。

选择值后，您可以使用简单的 if-else 语句检查它的值，并将带有dropdownB.setAttribute('disabled')的属性添加到下拉列表 B。

Answer 3

你可以使用：

document.getElementById("elementId").disabled = true;

只需将值更改为true / false即可禁用和启用该元素。
对于是/否的下拉菜单，您需要将 onChange eventListener 添加到您的选择中，并在回调函数中添加代码以在选定选项为是时禁用。
对于 YesNo 选择中的默认选择选项，只需将selected属性添加到您希望默认选择的选项。

 function onChangeYesNo(option) { if(option.value == "Yes"){ document.getElementById("dropwdown1").disabled = false; }else{ document.getElementById("dropwdown1").disabled = true; } }

 <select id="yesNo" onchange="onChangeYesNo(this)"> <option value="Yes">Yes</option> <option value="No" selected>No</option> </select> <select id="dropwdown1" disabled="true"> <option value="val1">val1</option> <option value="val2">val2</option> </select>

Answer 4

这是一种方法：

 const one=document.getElementById("yesno"), two=document.getElementById("ck1"); one.onchange=()=>two.style.display=one.value=="Yes"?"":"none"

 <label for="new">New staff join Date: </label> <form method="post" action="?"> <select id="yesno"> <option>No</option> <option>Yes</option> </select> <select name="ckb" id="ck1" style="display:none"> <option disabled selected="select">-----Select Cut-----</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> </select> </form>