カスケードDropDown前の選択を削除

Question

私はhtmlで7つのドロップダウンボックスを持つようにしています。彼らはすべて同じデータを入力します。私がしようとしているのは、最初のドロップダウンが選択され、選択された項目が次のドロップダウンから削除されるときです。だから、あなたが数字を持っている場合：最初のドロップダウンでBを選択し、次にドロップダウンでA、C、Dだけを表示しなければならない場合は、A、B、C、D、E、F、G、 、E、F、G、H、Iなど、最大7回のドロップダウンが可能です。私はJavaScriptやJQueryでこれに接近する最善の方法が何であるか分かりません。あなたの助けを前もってありがとう。

<table> 
    Selected Options: <div id="123"></div> 
     <tr> 
     <td class="assessmentHeader" align="left"><U> Diagnosis: - </U><br/> <!---Added code 88898 Created 7 dropdowns for Diagnosis 05/04/2012---> 
      <!---<font style="visibility:hidden"><textarea name="diagnosis" rows="2" cols="5" disabled="disabled">NULL</textarea></font><br/>--->                    
      Primary : <select name="Primary" onchange="selected(this)"> 
      <option value=""></option> 
      <cfloop query="DCheck"> 
      <option value="#DCheck.cDescription#" >#DCheck.cDescription#</option></cfloop>              
      </select> &nbsp;&nbsp; <br/> <br/> 
      Secondary: <select name="Secondary" onchange="selected(this)"> 
      <option value=""></option> 
      <cfloop query="DCheck"> 
      <option value="#DCheck.cDescription#">#DCheck.cDescription#</option> </cfloop> 
                       </select>&nbsp;&nbsp;<br><br /> 
      Third &nbsp; : <select name="Third" onchange="selected(this)"> 
      <option value=""></option> 
      <cfloop query="DCheck"> 
      <option value="#DCheck.cDescription#">#DCheck.cDescription#</option></cfloop> 
                       </select>&nbsp;&nbsp;<br><br/> 
      Fourth : <select name="Fourth" onchange="selected(this)"> 
      <option value=""></option> 
      <cfloop query="DCheck"> 
      <option value="#DCheck.cDescription#">#DCheck.cDescription#</option></cfloop> 
                       </select>&nbsp;&nbsp;<br><br/> 
      Fifth &nbsp; : <select name="Fifth" onchange="selected(this)"> 
      <option value=""></option> 
      <cfloop query="DCheck"> 
      <option value="#DCheck.cDescription#">#DCheck.cDescription#</option></cfloop> 
                       </select>&nbsp;&nbsp;<br><br/> 
      Sixth &nbsp; : <select name="Sixth" onchange="selected(this)"> 
      <option value=""></option> 
      <cfloop query="DCheck"> 
      <option value="#DCheck.cDescription#">#DCheck.cDescription#</option></cfloop> 
                       </select>&nbsp;&nbsp;<br><br/> 
      Seventh : <select name="Seventh" onchange="selected(this)"> 
      <option value=""></option> 
      <cfloop query="DCheck"> 
      <option value="#DCheck.cDescription#">#DCheck.cDescription#</option></cfloop> 
                       </select>&nbsp;&nbsp;<br><br /> 
      </td>      
     </tr> 
     </table> 

Answer 1

http://jsfiddle.net/iambriansreed/AyxSE/

これは無限selectタグのために働きます。

jQueryの

$('#select-group select').change(function(){ 

    var values = []; 
    $('#select-group select').each(function(){ 
     if(this.value.length > 0) 
      values.push(this.value); 
    }); 

    $('#select-group select optgroup').each(function(){ 
     $(this).after('<option>'+   $(this).attr('label')+'</option>').remove(); 
    }); 

    $('#select-group select option').each(function(){ 
     if($.inArray(this.value, values) > -1 && 
      !this.selected)     
     $(this).after('<optgroup label="'+this.value+'"></optgroup>').remove(); 
    }); 

});​ 

HTML

<div id="select-group"> 
    <select> 
     <option value="">Select a ...</option> 
     <option>A</option> 
     <option>B</option> 
     <option>C</option> 
     <option>D</option> 
     <option>E</option> 
     <option>F</option> 
     <option>G</option> 
    </select> 
    <select> 
     <option value="">Select a ...</option> 
     <option>A</option> 
     <option>B</option> 
     <option>C</option> 
     <option>D</option> 
     <option>E</option> 
     <option>F</option> 
     <option>G</option> 
    </select> 

</div>​