javascript 从选择中启用或禁用选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17973236/
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
enable or disable option from select
提问by M.Sidim
I am trying to make an option either selectable OR non-selectable based on whether or not they chose another option. For example, if there is options 1-6 and they have NOT chosen option 1 in their first select box, then in that SAME select box and any other in the form, then option 6 could NOT be chosen.
我正在尝试根据他们是否选择另一个选项来选择可选或不可选择的选项。例如，如果有选项 1-6 并且他们没有在他们的第一个选择框中选择选项 1，那么在该相同的选择框和表单中的任何其他框中，则无法选择选项 6。
I looked around, but everything is about clicking a button to achieve this.
我环顾四周，但一切都是关于点击一个按钮来实现这一点。
This is the code I have (I have also tried onclick)
这是我的代码（我也试过onclick）
<script type="text/javascript">
function makeDisable(){
var x=document.getElementById("mySelect2");
x.disabled=true
}
function makeEnable(){
var x=document.getElementById("mySelect2");
x.disabled=false
}</script>
<form>
<select class="mySelect" id="mySelect">
<option onchange="makeEnable()" value="Enable list">Apple</option>
<option onchange="makeDisable()" value="Disable list">Banana</option>
<option id="mySelect2" disabled="true">Orange</option>
</select>
</form>
采纳答案by Aycan Ya??t
Option elements don't have event "onchange", but Select elements do.
Option 元素没有事件“onchange”，但 Select 元素有。
I've quickly wrote a code snippet below. You may add more select items. When you choose an option in one of those select elements, you shouldn't choose options at same index in other select elements.
我很快在下面写了一个代码片段。您可以添加更多选择项。当您在这些 select 元素之一中选择一个选项时，您不应在其他 select 元素中选择位于相同索引处的选项。
<script type="text/javascript">
function toggleDisability(selectElement){
//Getting all select elements
var arraySelects = document.getElementsByClassName('mySelect');
//Getting selected index
var selectedOption = selectElement.selectedIndex;
//Disabling options at same index in other select elements
for(var i=0; i<arraySelects.length; i++) {
if(arraySelects[i] == selectElement)
continue; //Passing the selected Select Element
arraySelects[i].options[selectedOption].disabled = true;
}
}
</script>
<form>
<select onchange="toggleDisability(this);" class="mySelect" id="mySelect1">
<option>Apple</option>
<option>Banana</option>
<option>Orange</option>
</select>
<select onchange="toggleDisability(this);" class="mySelect" id="mySelect2">
<option>Hamburger</option>
<option>Pizza</option>
<option>Cola</option>
</select>
</form>
回答by Le Thanh Duong
<script type="text/javascript">
function toggleDisability(selectElement){
//Getting all select elements
var arraySelects = document.getElementsByClassName('mySelect');
//Getting selected index
var selectedOption = selectElement.selectedIndex;
//Disabling options at same index in other select elements
for(var i=0; i<selectElement.length; i++) {
if(arraySelects[i] == selectedOption)
continue; //Passing the selected Select Element
arraySelects[i].options[selectedOption].disabled = true;
}
}
</script>
<form>
<select onchange="toggleDisability(this);" class="mySelect" id="mySelect1">
<option>Apple</option>
<option>Banana</option>
<option>Orange</option>
</select>
<select onchange="toggleDisability(this);" class="mySelect" id="mySelect2">
<option>Hamburger</option>
<option>Pizza</option>
<option>Cola</option>
</select>
</form>