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.
I looked around, but everything is about clicking a button to achieve this.
This is the code I have (I have also tried 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>
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.
I looked around, but everything is about clicking a button to achieve this.
This is the code I have (I have also tried 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>
Share
Improve this question
edited Jan 16, 2017 at 17:23
Kara
6,22616 gold badges53 silver badges58 bronze badges
asked Jul 31, 2013 at 14:30
M.SidimM.Sidim
3033 gold badges5 silver badges15 bronze badges
1 Answer
Reset to default 8Option elements don't have event "onchange", but Select elements do.
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.
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;
}
}
<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>