javascript - 複数のドロップダウンを最初に選択すると、2 番目のドロップダウンから最大 7 つのドロップダウンまで値が削除されます

Question

HTMLに7つのドロップダウンボックスがあります。それらはすべて同じデータが取り込まれます。私がやろうとしているのは、最初のドロップダウンが選択されたときに、選択したアイテムを次のドロップダウンから削除することです。したがって、データがある場合: A、B、C、D、E、F、G、H、I 1 つのドロップダウンで、最初のドロップダウンで B を選択すると、次のドロップダウンでは A、C、D のみが表示されます。 、E、F、G、H、I など、最大 7 つのドロップダウン。JavaScript でこれにアプローチする最善の方法が何であるかはわかりません。サンプル コード: 以下のコードは、私の PC の IE7 および IE8 では機能しません。このコードを機能させるには、どのような変更を加える必要があるかを知っている人がいます。

 function callSave(select) {

        var parent = select.parentNode;    

       var usedValues = {};    

      for (var i = 0; i < 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 < parent.children.length; ++i) {      
      var s = parent.children[i];        
      if (s.nodeName.toLowerCase() != 'select') {
          continue;
      }        

      for (var j = 0; j < 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:
  <div>
      <select onChange="callSave(this)">
       <option></option>
       <option>A</option>
      <option>B</option>
       <option>C</option>
      <option>D</option>
      <option>E</option>
      <option>F</option>
      <option>G</option>
      <option>H</option>
   </select>
  <select onChange="callSave(this)">
       <option></option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
      <option>E</option>
      <option>F</option>
        <option>G</option>
       <option>H</option>
  </select>
   <select onChange="callSave(this)">
       <option></option>
       <option>A</option>
       <option>B</option>
      <option>C</option>
      <option>D</option>
       <option>E</option>
       <option>F</option>
      <option>G</option>
      <option>H</option>
   </select>
   <select onChange="callSave(this)">
      <option></option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
      <option>E</option>
      <option>F</option>
      <option>G</option>
      <option>H</option>
  </select>