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

我想要做的是在第一个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); 
        });
});

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课程.

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

示例: 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()^[文档]方法来筛选向下的状态与匹配值,

• 在nextUntil()^[文档]方法来获取所有后续的选项,直到你找到一个有'level-0',

• 在clone()^[文档]再次方法进行克隆.

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

• 清除选项的empty()^[docs]方法,

• 在append()^[文档]方法追加刚刚克隆的人.

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