选择框被其他选择框的选项禁用或启用答案

【问题标题】：Selectbox disabled or enabled by an option of an other selectbox选择框被其他选择框的选项禁用或启用
【发布时间】：2012-08-29 11:11:45
【问题描述】：

我尝试创建一个关系/连接 beetwen 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 个选项？

【问题讨论】：

标签： javascript html select

【解决方案1】：

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

【讨论】：

【解决方案2】：

试试这个：

<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)。使用它，您可以非常简单地完成任务。

【讨论】：

把onchange放在select标签里不是更好吗？否则，如果您添加另一个也包含值“01”的选择框，您可能会禁用 select02。
不应该将this.value 替换为document.getElementById('select01').options[document.getElementById('select01').selectedIndex].value（或更简单的等价物）吗？否则似乎不起作用。

【解决方案3】：

document.getElementById('select01').onchange = function () {
    document.getElementById("select02").disabled = this.value == '01';
}

这是小提琴：http://jsfiddle.net/PK2vc/

【讨论】：

【解决方案4】：

您必须使用onchange 而不是onclick。所以下面应该是

oui.onclick = function()

替换为

oui.onchange = function()

祝你好运！！

【讨论】：

现在我正在使用 onchange，我更改了我的 selec01 的值，然后我的 select02 现在启用了 .. 但是我怎样才能只针对我的 select01 的 2 个选项？
@Peter 您的意思是说该操作将在特定选项选择情况下执行吗？
是的，但没关系，我这样验证它：if(document.getElementById("typeevent" ).value=='T' || document.getElementById("typeevent" ).value= ='G'){
解决了，我会在 8 小时后发布我的答案。谢谢！