Multi dropdowns first one selected remove the value from 2nd dropdown up to 7 dropdowns
<p>i have 7 dropdown boxes in html. They will all get populated the same data. What I am trying to do is when the first dropdown is selected it would remove the selected item from the next dropdown. So, if you Have data: A,B,C,D,E,F,G,H,I in one dropdown if I select B in the first drop down then in the next dropdown it should only show A,C,D,E,F,G,H,I and so on up to 7 dropdowns. I dont know what would be the best way to approach this in JavaScript.  Sample Code: Below code doesn't work on IE7 &amp; IE8 on my pc, Any one know what changes i have to make it to work this code..  <strong>Thanks for your help in advance</strong></p>

<pre><code> function callSave(select) {

        var parent = select.parentNode;    

       var usedValues = {};    

      for (var i = 0; i &lt; parent.children.length; ++i) {

        var s = parent.children[i];

      if (s.nodeName.toLowerCase() != 'select') {
           continue;
        }        

     if (s.value != '') {
         usedValues[ s.value ] = s;
      } 
  }    

   for (var i = 0; i &lt; parent.children.length; ++i) {      
      var s = parent.children[i];        
      if (s.nodeName.toLowerCase() != 'select') {
          continue;
      }        

      for (var j = 0; j &lt; s.children.length; ++j) {           
         var o = s.children[j];             
        if (o.nodeName.toLowerCase() != 'option') {
            continue;
        }            

         var p = o.value == '' ? undefined : usedValues[o.value];          
         if (p == undefined || p == s) {
             o.style.display = '';
         }          
         else {
             o.style.display = 'none';
         }
       }
    }
 }

HTML:
  &lt;div&gt;
      &lt;select onChange="callSave(this)"&gt;
       &lt;option&gt;&lt;/option&gt;
       &lt;option&gt;A&lt;/option&gt;
      &lt;option&gt;B&lt;/option&gt;
       &lt;option&gt;C&lt;/option&gt;
      &lt;option&gt;D&lt;/option&gt;
      &lt;option&gt;E&lt;/option&gt;
      &lt;option&gt;F&lt;/option&gt;
      &lt;option&gt;G&lt;/option&gt;
      &lt;option&gt;H&lt;/option&gt;
   &lt;/select&gt;
  &lt;select onChange="callSave(this)"&gt;
       &lt;option&gt;&lt;/option&gt;
      &lt;option&gt;A&lt;/option&gt;
      &lt;option&gt;B&lt;/option&gt;
      &lt;option&gt;C&lt;/option&gt;
      &lt;option&gt;D&lt;/option&gt;
      &lt;option&gt;E&lt;/option&gt;
      &lt;option&gt;F&lt;/option&gt;
        &lt;option&gt;G&lt;/option&gt;
       &lt;option&gt;H&lt;/option&gt;
  &lt;/select&gt;
   &lt;select onChange="callSave(this)"&gt;
       &lt;option&gt;&lt;/option&gt;
       &lt;option&gt;A&lt;/option&gt;
       &lt;option&gt;B&lt;/option&gt;
      &lt;option&gt;C&lt;/option&gt;
      &lt;option&gt;D&lt;/option&gt;
       &lt;option&gt;E&lt;/option&gt;
       &lt;option&gt;F&lt;/option&gt;
      &lt;option&gt;G&lt;/option&gt;
      &lt;option&gt;H&lt;/option&gt;
   &lt;/select&gt;
   &lt;select onChange="callSave(this)"&gt;
      &lt;option&gt;&lt;/option&gt;
      &lt;option&gt;A&lt;/option&gt;
      &lt;option&gt;B&lt;/option&gt;
      &lt;option&gt;C&lt;/option&gt;
      &lt;option&gt;D&lt;/option&gt;
      &lt;option&gt;E&lt;/option&gt;
      &lt;option&gt;F&lt;/option&gt;
      &lt;option&gt;G&lt;/option&gt;
      &lt;option&gt;H&lt;/option&gt;
  &lt;/select&gt;
</code></pre>
