javascript - enable or disable option from select -
i trying make option either selectable or non-selectable based on whether or not chose option. example, if there options 1-6 , have not chosen option 1 in first select box, in same select box , other in form, option 6 not chosen.
i looked around, clicking button achieve this.
this code have (i have 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>
option elements don't have event "onchange", select elements do.
i've wrote code snippet below. may add more select items. when choose option in 1 of select elements, shouldn't choose options @ same index in other select elements.
<script type="text/javascript"> function toggledisability(selectelement){ //getting select elements var arrayselects = document.getelementsbyclassname('myselect'); //getting selected index var selectedoption = selectelement.selectedindex; //disabling options @ same index in other select elements for(var i=0; i<arrayselects.length; i++) { if(arrayselects[i] == selectelement) continue; //passing 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>
Comments
Post a Comment