我尝试创建一个关系/ 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个选项?
答案 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';
}
答案 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;
}
}