Best Jquery ,javascript, HTML5 CSS3 tutorial with jquery examples, php script , demos for beginners, web designers and web developers.

Jquery

Jquery Training

Jquery training blog

Disable option in multiple select drop down box

Suppose there are three select box and each have the 4 options. Suppose i have selected the 3rd option of first select box, the other option of the selected select box will disabled and the selected option will be enabled. The 3rd option of other select box will be disabled.


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.







About the author

Joydeb Choudhury holds a Master's degree in Computer Application from I.G.N.O.U. After working as a web developer in various companies he has started bloging in 2016.

Recent Posts of blog

Downalod Free Php Scripts