Today i worked on a new topic for a website. The topic was how to disable  all the option of the selected select box except the selected  option, and disable a option of other select box, which is enabled in the selected select box.

The below example have three select box and each have the 4 options. I have selected the 3rd option of first select box, the other option of the first select box has been disabled and the 3rd option has been enabled on change.

The 3rd option of the 2nd and 3rd select box has been disabled on select of first select box. The other options of the 2nd and 3rd select box remain enabled on elect of the first select box.

Enable selected option in multiple select drop down box in

multiple select drop down box

.

<!DOCTYPE html>
 
<html>a
 
<body>
 

 
<select id="one" class="my" onchange="changeSelect(this.id)">
 
  <option value="volvo">Volvo</option>
 
  <option value="saab">Saab</option>
 
  <option value="vw">VW</option>
 
  <option value="audi">Audi</option>
 
</select>
 

 
<select id="two" class="my" onchange="changeSelect(this.id)">
 
  <option value="volvo">Volvo</option>
 
  <option value="saab">Saab</option>
 
  <option value="vw">VW</option>
 
  <option value="audi">Audi</option>
 
</select>
 

 
<select id="three" class="my" onchange="changeSelect(this.id)">
 
  <option value="volvo">Volvo</option>
 
  <option value="saab">Saab</option>
 
  <option value="vw">VW</option>
 
  <option value="audi">Audi</option>
 
</select>
 

 
<script>
 
function changeSelect(id){
 

 
var current=document.getElementById(id);
 

 
var seleted=current.selectedIndex;
 

 
var cusid_ele = document.getElementsByClassName('my');
 

 
for (var i = 0; i < cusid_ele.length; ++i) {
 
var item = cusid_ele[i];
 
item.options[seleted].setAttribute("disabled","disabled");
 
}
 

 
for(var j=0; j<current.length; j++){
 
current.options[j].setAttribute("disabled","disabled");
 
}
 

 
current.options[seleted].removeAttribute("disabled");
 

 
}
 

 
</script>
 
</body>
 
</html>

Please visit the demo of the  multiple select drop down box.

Leave comment

Your email address will not be published. Required fields are marked with *.