1

HTMLに7つのドロップダウンボックスを作成しようとしています。それらはすべて同じデータが取り込まれます。私がやろうとしているのは、最初のドロップダウンが選択されたときに、選択したアイテムを次のドロップダウンから削除することです。したがって、数字がある場合: A、B、C、D、E、F、G、H、I 1 つのドロップダウンで、最初のドロップダウンで B を選択すると、次のドロップダウンでは A、C、D のみが表示されます。 、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>
4

1 に答える 1

3

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>​
于 2012-05-09T14:42:08.677 に答える