jQuery将特定的选择列表选项移动到底部答案

【问题标题】：jQuery move specific select list option to bottomjQuery将特定的选择列表选项移动到底部
【发布时间】：2012-07-02 18:41:03
【问题描述】：

我有以下标记：-

<select name="a" id="a">
    <option>Option 1</option>
    <option>Option Bottom</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <optgroup label="Test">
       <option>Option A</option>
       <option>Option B</option>
    </optgroup>
</select>

使用 jQuery 我希望将选项 Option Bottom 移动到列表底部。但是，<optgroup> 必须位于最底部。

所以标记需要这样写：-

<select name="a" id="a">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option Bottom</option>
    <optgroup label="Test">
       <option>Option A</option>
       <option>Option B</option>
    </optgroup>
</select>

我可以通过使用获得不包括<optgroup> 的选项 $options = $('#a').children('option');

如何获取Option Bottom 选项，如何将其移至列表底部？

【问题讨论】：

标签： jquery dom-manipulation

【解决方案1】：

$('#a > option').filter(function() {
    return this.innerHTML == "Option Bottom";
}).insertBefore($('#a  optgroup'));

Live DEMO

【讨论】：

@generalexception。不，除非运行代码时<opgroup> 不存在。你能在jsfiddle.net 重现不工作的场景吗？

【解决方案2】：

$('#a option').each(function() {
    if($(this).text() == 'Option Bottom') {
        $(this).insertBefore('#a optgroup');
    }
});

【讨论】：

如果您愿意，可以使用filter，insertBefore 函数适用于 jQuery 对象。