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

时间:2012-09-04 18:39:16

标签: javascript html select

我尝试创建一个关系/ connexion beetwen 2 selectbox

<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。我尝试从其他功能(启用选择框的radiobutton)调整它,但它似乎不起作用。我的列表在beging时被禁用,但是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个选项?

4 个答案:

答案 0 :(得分:13)

试试这个:

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

答案 1 :(得分:3)

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

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

答案 2 :(得分:1)

您必须使用onchange代替onclick。所以下面应该是

oui.onclick = function() 

替换为

oui.onchange = function() 

祝你好运!!

答案 3 :(得分:-1)

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