Javascript 选择框被其他选择框的选项禁用或启用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12269470/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Selectbox disabled or enabled by an option of an other selectbox
提问by Peter
I try to create a relation/connexion beetwen 2 selectbox
我尝试创建一个关系/连接 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>
I want that my selectbox select02be disabled at the begening, and when i click on value02or value03, we enable it, and when we click on value01, disable it.
我希望我的选择框select02在开始时被禁用，当我点击 value02或value03 时，我们启用它，当我们点击value01 时，禁用它。
There is my code js for the moment. I try to adapt it from an other function (radiobutton enabling a selectbox) but it doesn't seem to work. My list is disable at the beging, but the onclick is not working ...
目前有我的代码js。我尝试从其他功能（启用选择框的单选按钮）中调整它，但它似乎不起作用。我的列表在开始时被禁用，但 onclick 不起作用......
Some body can help me?
有人可以帮助我吗？
var oui = document.creation.select01[0];
document.getElementById("select02").disabled=true;
oui.onclick = function() {
document.getElementById("select02").disabled=false;
}
Ok, so NOW, i'm with this code:
好的，现在，我使用以下代码：
<script>
var oui = document.select01;
document.getElementById("select02" ).disabled=true;
oui.onchange = function(){
document.getElementById("select02" ).disabled=false;
}
</script>
I change the value of my selec01, then my select02 is now enable .. but how can I target only 2 options of my select01 ?
我更改了 selec01 的值，然后我的 select02 现在已启用 .. 但是我如何只针对我的 select01 的 2 个选项？
回答by cassi.lup
Try this:
尝试这个：
<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>
And as a JS script:
作为一个 JS 脚本：
function handleSelect() {
if (this.value == '01') {
document.getElementById('select02').disabled = true;
} else {
document.getElementById('select02').disabled = false;
}
}
And a tip: explore jQuery, a very popular JS framework (jquery.com). You can achieve your task very simply by using it.
还有一个提示：探索 jQuery，一个非常流行的 JS 框架 (jquery.com)。您可以通过使用它非常简单地完成您的任务。
回答by Joseph Silber
?document.getElementById('select01').onchange = function () {
document.getElementById("select02").disabled = this.value == '01';
}????????
Here's the fiddle: http://jsfiddle.net/PK2vc/
这是小提琴：http: //jsfiddle.net/PK2vc/
回答by Kundan Singh Chouhan
You must use onchangeinstead of onclick. So below should be
您必须使用onchange代替onclick。所以下面应该是
oui.onclick = function()
Replaced with
替换为
oui.onchange = function()
Good Luck !!
祝你好运 ！！
回答by Peter
function handleSelect() {
if (this.value == '01') {
document.getElementById('select02').disabled = true;
} else {
document.getElementById('select02').disabled = false;
}
}
