Multiple Listbox populated based on previous selection

[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?

[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.

[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>