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

时间:2012-07-02 08:50:28

标签: jquery dom-manipulation

我有以下标记: -

<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选项,以及如何将其移至列表底部?

2 个答案:

答案 0 :(得分:5)

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

Live DEMO

答案 1 :(得分:0)

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