删除jQuery中的选择选项

我有两个看起来像这样的选择：

<select name='input_34' id='input_1_34'  class='small gfield_select' tabindex='1' >
<option value='29' >Alabama</option>
<option value='34' >Alaska</option>
<option value='42' >Arizona</option>
....

<select name='input_13' id='input_13' class='small gfield_select'  tabindex="2"> 
<option value='-1' selected='selected'>Select a base</option> 
<option class="level-0" value="29">Alabama</option> 
<option class="level-1" value="30">&nbsp;&nbsp;&nbsp;Anniston Army Depot</option> 
<option class="level-1" value="333">&nbsp;&nbsp;&nbsp;Fort Rucker</option> 
<option class="level-1" value="32">&nbsp;&nbsp;&nbsp;Maxwell-Gunter AFB</option> 
<option class="level-1" value="33">&nbsp;&nbsp;&nbsp;Redstone Arsenal</option> 
<option class="level-0" value="34">Alaska</option> 
<option class="level-1" value="35">&nbsp;&nbsp;&nbsp;Eielson AFB</option> 
<option class="level-1" value="36">&nbsp;&nbsp;&nbsp;Elmendorf AFB</option> 
<option class="level-1" value="37">&nbsp;&nbsp;&nbsp;Fort Greely</option> 
<option class="level-1" value="38">&nbsp;&nbsp;&nbsp;Fort Richardson</option> 
<option class="level-1" value="39">&nbsp;&nbsp;&nbsp;Fort Wainwright</option> 
<option class="level-1" value="40">&nbsp;&nbsp;&nbsp;USCG ISC Kodiak</option> 
<option class="level-1" value="41">&nbsp;&nbsp;&nbsp;USCG Juneau</option> 
<option class="level-1" value="42">&nbsp;&nbsp;&nbsp;USCG Ketchikan</option> 
<option class="level-0" value="43">Arizona</option>

我想要做的是在第一个dropwown中选择一个状态,然后删除第二个下拉列表中的所有选项,除了在所选状态下列出的那些选项.

到目前为止我所做的是从第一个下拉列表中确定所选状态,然后获取该选项在第二个下拉列表中的位置的索引.我该怎么办？我正在考虑使用.next()来通过类.level-1的每个选项,停在.level-0.一旦我有了,我可以使用.remove()删除除那些之外的所有其他选项.

到目前为止,这是我的代码：

jQuery(document).ready(function(){

        jQuery('#input_1_34').bind('change', function()
        {
            //get selected value from drop down
            var selectedValue = jQuery("#input_1_34").val();

            //hide everything but bases for the selected state
            //jQuery("#input_13 option[value=" + selectedValue + "]").next().remove();
            selectedIndex = jQuery("#input_13 option[value=" + selectedValue + "]").index();
            alert (selectedIndex); 
        });
});

我强烈建议使用< optgroup>在每个州分组基地的要素.

这样你就不需要所有& nbsp;创建缩进,当您将状态设置为标签时,它会给出漂亮的外观.

<select name='input_13' id='input_13' class='small gfield_select'  tabindex="2"> 
    <option value='-1' selected='selected'>Select a base</option> 
    <optgroup class="level-0" value='29' label="Alabama">
        <option class="level-1" value="30">Anniston Army Depot</option> 
        <option class="level-1" value="333">Fort Rucker</option> 
        <option class="level-1" value="32">Maxwell-Gunter AFB</option> 
        <option class="level-1" value="33">Redstone Arsenal</option> 
    </optgroup>
    <optgroup class="level-0" value="34" label="Alaska">
        <option class="level-1" value="35">Eielson AFB</option> 
        <option class="level-1" value="36">Elmendorf AFB</option> 
        <option class="level-1" value="37">Fort Greely</option> 
        <option class="level-1" value="38">Fort Richardson</option> 
        <option class="level-1" value="39">Fort Wainwright</option> 
        <option class="level-1" value="40">USCG ISC Kodiak</option> 
        <option class="level-1" value="41">USCG Juneau</option> 
        <option class="level-1" value="42">USCG Ketchikan</option>
    </optgroup>
    <optgroup class="level-0" value="43" label="Arizona"> 
        <option class="level-1" value="44">USCG whatever</option> 
        <option class="level-1" value="45">USCG whatever</option>
    </optgroup>
</select>

它还可以简化您的代码,因为您可以选择optgroup的所有子代.

示例：http://jsfiddle.net/asBSU/3/

jQuery(document).ready(function() {

    var clone_select = $('#input_13').clone();

    jQuery('#input_1_34').bind('change', function() {
        var selectedValue = jQuery("#input_1_34").val();

        var clone_subset = clone_select
            .find('optgroup[value="' + selectedValue + '"] > option')
            .clone();
        $('#input_13').empty().append(clone_subset);
    });
});

我想你也可以摆脱所有那些n级课程.

我们甚至可以简化和清理代码更像这样：

示例：http://jsfiddle.net/asBSU/4/

jQuery(document).ready(function() {

    var clone_groups = $('#input_13 > optgroup').clone();

    jQuery('#input_1_34').bind('change', function() {
        clone_groups.eq( this.selectedIndex )
                    .children()
                    .clone()
                    .appendTo( $('#input_13').empty() );
    });
});

这是因为每个<选项>的索引.在第一个< select>将与期望的< optgroup>的索引相对应.在克隆< select>中.

原始答案：

使用clone()^[docs]方法将克隆保留为整个< select>这有很长的名单.

从第一个中选择值时,请执行以下操作：

>使用find()^[docs]方法获取选项,
> filter()^[docs]方法过滤到具有匹配值的状态,
> nextUntil()^[docs]方法获取所有后续选项,直到找到一个’level-0′,
> clone()^[docs]方法再次制作克隆.

然后从页面上的选择中,使用：

> empty()^[docs]方法清除选项,
> append()^[docs]方法追加你刚刚克隆的那些.

示例：http://jsfiddle.net/XrFr7/2/

jQuery(document).ready(function(){

        var clone_select = $('#input_13').clone();

        jQuery('#input_1_34').bind('change', function() {

            var selectedValue = jQuery("#input_1_34").val();

            var clone_subset = clone_select.find('option')
                                           .filter('[value="' + selectedValue + '"]')
                                           .nextUntil('.level-0')
                                           .clone();
            $('#input_13').empty().append( clone_subset );
        });
});