删除 jQuery 中的选择选项答案

【问题标题】：Remove select options in jQuery删除 jQuery 中的选择选项
【发布时间】：2011-09-28 09:10:39
【问题描述】：

全部，

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

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

【问题讨论】：

我的第一个想法是，我认为您的设置方式让这个问题变得更加困难。第二个选择控件是否必须具有所有这些选项才能开始？似乎在第一个选择完成之前禁用该控件，然后用适当的选项填充它会更容易，但也许有某种用户交互流程不允许这样做？
我同意您可以通过更改 html 让您的生活更轻松，如果您想要这样做，请查看我的回答！
@kinakuta：@user6641 应该按照目前的方式进行操作，以便优雅降级。尽管我强烈推荐 <optgroup> 元素，就像我在更新的答案中一样。
@patrick_dw 从严格的渐进增强/优雅降级的角度来看，我可以理解您的意思，但从 ui 的角度来看，以这种方式设置两个控件并不理想。
@kinakuta：是的，我认为在需要填充之前隐藏（或删除）第二个是个好主意。

标签： jquery select options

【解决方案1】：

您可以使用 nextUntil() 并这样做：

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


    $('#input_13').html('').append(allOptions);
    selectedOptions = $("#input_13 option[value=" + selectedValue + "]").nextUntil('.level-0').andSelf();

    $('#input_13').html('').append(selectedOptions);
});

编辑-我更改了答案以允许用户选择更多选项

看这里的小提琴：http://jsfiddle.net/QGCh4/2/

【讨论】：

但是当你想改变状态时会发生什么？您已经销毁了所有原始的 option 元素。
您可以保存所有选项，然后将它们带回 - 我编辑帖子以反映这一点。无论如何，你最好改变你的标记！

【解决方案2】：

编辑： 更新答案。

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

这样您就不需要所有的&nbsp; 来创建缩进，并且当您将状态设置为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() );
    });
});

这是因为第一个<select> 中每个<option> 的索引将与克隆的<select> 中所需<optgroup> 的索引相对应。

原答案：

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

【讨论】：

谢谢，谢谢！这很好用......我很欣赏您使用的我不知道的函数的有用解释，例如 clone() 和 nextUntil()。似乎使用 jQuery，他们已经想到了一切。我真的很感激这一点。我刚从 Sitepoint，jQuery 购买了一本书——从新手到忍者。希望这能让我跟上进度，这样我就可以像你一样开始弄清楚这些事情了。
另外，正如我上面所说的 optgroup 听起来不错，但下拉菜单是由 wordpress 生成的。我不想编辑核心功能，因为我担心下次升级 wordpress 时它会损坏。

【解决方案3】：

我同意kinakuta 的观点，你让这太难了。如果您真的想使用此流程，您可以尝试以下方法：

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

        var removing = true;
        jQuery('#input_13 option').each(function() {
            if (jQuery(this).hasClass('level-0')) {
                removing = !(jQuery(this).val() == selectedValue);
            }
            if (removing) {
                jQuery(this).hide();
            } else {
                jQuery(this).show();
            }
        });
    });
});

循环所有元素并隐藏/显示它们。如果删除元素，则必须重新填充数组。

【讨论】：

您无法在某些浏览器中隐藏<option> 元素。