javascript - 选择框被其他选择框的选项禁用或启用

Question

我尝试在 2 个选择框之间创建关系/连接

<form id="creation" name="creation">
<select name="select01" id="select01">
     <option value="01">01</option>
     <option value="02">02</option>
     <option value="03">03</option>
</select>

<select name="select02" id="select02">
     <option value="aa">aa</option>
     <option value="bb">bb</option>
     <option value="cc">cc</option>
</select>
</form>

我希望我的选择框 select02 在开始时被禁用，当我点击 value02 或 value03 时，我们启用它，并且当我们点击 value01 时，将其禁用。

目前有我的代码js。我尝试从其他功能(启用选择框的单选按钮)改编它，但它似乎不起作用。我的列表在开始时是禁用的，但是 onclick 不工作......

有人可以帮助我吗？

var oui = document.creation.select01[0];

document.getElementById("select02").disabled=true;
oui.onclick = function() {
document.getElementById("select02").disabled=false;
}

好的，现在，我使用这段代码:

<script>
var oui = document.select01;
document.getElementById("select02" ).disabled=true;
oui.onchange = function(){
document.getElementById("select02" ).disabled=false;
}
</script>

我更改了我的 selec01 的值，然后我的 select02 现在启用了..但是我怎样才能只定位我的 select01 的 2 个选项？

Answer 1

试试这个:

<form id="creation" name="creation" onchange="handleSelect()">
<select name="select01" id="select01">
     <option value="01">01</option>
     <option value="02">02</option>
     <option value="03">03</option>
</select>

<select name="select02" id="select02" disabled>
     <option value="aa">aa</option>
     <option value="bb">bb</option>
     <option value="cc">cc</option>
</select>
</form>

作为 JS 脚本:

 function handleSelect() {
     if (this.value == '01') {
         document.getElementById('select02').disabled = true;
     } else {
         document.getElementById('select02').disabled = false;
     }
 }

还有一个提示:探索 jQuery，一个非常流行的 JS 框架 (jquery.com)。您可以通过使用它非常简单地完成您的任务。