0

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
22
Views
2 Years
Discussion Span
Last Post by mbarandao
0

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.

0
<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>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.