Member Avatar for mbarandao

I would like to create a series dropdown boxes, each containing the same listing content. However, when one option is selected from the preceeding dropdownbox, that element is removed from the remaining boxes. I would like this process to continue until all selection have been selected.

1 <select name="box1">
   <option>value 1</option>
   <option>value 2</option><!--if this is selected-->
   <option>value 3</option>
   </select>

2 <select name="box2">
   <option>value 1</option><!--if this is selected-->
   <option>value 2</option><!--NOT SELECTABLE-->
   <option>value 3</option>
   </select>


3 <select name="box3">
   <option>value 1</option><!--NOT SELECTABLE-->
   <option>value 2</option><!--NOT SELECTABLE-->
   <option>value 3</option> <!--The ONLY SELECTABLE OPTION-->
   </select>

ANy thoughts on how this can achieved?

Edited by mbarandao
  • 2 Contributors
  • 2 Replies
  • 160 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by mbarandao
Member Avatar for lps

If I am in the case, what I will do is add the select tag with id attribute, and the options with class attribute. Then use the jquery to bind the select tag with onchange() event and remove the same class element from other select tag.

Member Avatar for mbarandao 
<form>
 1 <select  class="mySelect" id="mySelect1" onchange="makeDisabled(this)">
    <option>Choose...</option>
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
 </select>
 2 <select  class="mySelect" id="mySelect2" onchange="makeDisabled(this)">
    <option>Choose...</option>
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
</select>
3 <select " class="mySelect" id="mySelect3" onchange="makeDisabled(this)">
    <option>Choose...</option>
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
</select>

</form>

<script type="text/javascript">
  function makeDisabled(selectElement){
   //Getting all select elements
   var arraySelects = document.getElementsByClassName('mySelect');
   //Getting selected index
   var selectedOption = selectElement.selectedIndex;
   if (selectedOption==0) {return false}
   //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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.