jquery - 删除 jQuery 中的选择选项

Question

全部，

我有两个选择，如下所示:

<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> 

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

到目前为止，我所做的是从第一个下拉列表中确定选定的状态，然后获取该选项在第二个下拉列表中的位置的索引。我应该如何继续？我正在考虑使用 .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); 
        });
});

Answer 1

编辑: 更新答案。

我强烈建议使用<optgroup>用于对每个状态中的碱基进行分组的元素。

这样你就不需要所有的  创建缩进，当您将状态设置为 label 时，它看起来很漂亮.

<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);
    });
});

我想你可以摆脱所有这些 level-n也有类(class)。

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

示例: 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() );
    });
});

这是因为每个 <option> 的索引在第一<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 );
        });
});

<小时/>