使用jQuery动态添加optgroup

Question

<select id="myElement" multiple="multiple">
  <option value="1">Category Type</option>
  <option value="158">itemOne</option>
  <option value="157">itemTwo</option>
  <option value="7">My Type</option>
  <option value="20">itemThree</option>
  <option value="21">itemFour</option>
  <option value="22">itemFive</option>
  <option value="8">Category Yet Another</option>
  <option value="31">itemCheese</option>
  <option value="32">itemBrain</option>
</select>

我需要动态转换它，以便" Category“选项(任何不以”item“开头的选项)是一个optgroup，包装它后面的任何内容，直到下一个Category选项，所以上面的结果将如下所示：

<select id="myElement" multiple="multiple">
  <optGroup label="Category Type">
    <option value="158">One</option>
    <option value="157">Two</option>
  </optGroup>
  <optGroup label="My Type">
    <option value="20">Three</option>
    <option value="21">Four</option>
    <option value="22">Five</option>
  </optGroup>
  <optGroup label="Category Yet Another">
    <option value="31">Cheese</option>
    <option value="32">Brain</option>
  </optGroup>
</select>

如何使用jQuery遍历并更改值以获得所需的效果？

Answer 1

您必须遍历option元素，并根据其内容对其进行分组。使用jQuery比只使用纯DOM容易得多：

http://jsfiddle.net/kpykoahe/2/

$(document).ready(() => {
    const $cont = $('select');
    $('option').each((idx, el) => {
        const $el = $(el);
        if ($el.text().startsWith('item')) {
            $cont.find('optgroup').last().append($el);
            $el.text($el.text().substr(4));
        } else {
            $('<optgroup/>').attr('label', $el.text()).appendTo($cont);
            $el.remove();
        }
    });
});

Answer 2

您可以使用filter()来匹配将成为组的<option>元素。然后，您可以迭代它们并在相同的元素集合上调用nextUntil()以匹配后续选项(因为nextUntil()将在遇到集合中的一个成员时停止，即下一个应该成为一个组的选项)。

在那里，您可以在这些<option>元素上使用wrapAll()来创建它们的<optgroup>元素，然后在刚刚成为一个组的<option>元素上调用remove()。类似于：

var $groups = $("#myElement option").filter(function() {
    return $(this).text().indexOf("item") != 0;
});
$groups.each(function() {
    var $this = $(this);
    $this.nextUntil($groups).wrapAll($("<optgroup>", {
        label: $this.text()
    })).end().remove();
});

您可以在this fiddle中查看结果。

Answer 3

我的实现：

$(function(){
    var target = $('#target'),
        optGroup;

    function strStartsWith(str, prefix) {
        return str.indexOf(prefix) === 0;
    }

    $('#myElement').find('option').each(function(){
        var elm = $(this).clone();
        if(strStartsWith(elm.text(), 'item'))
        {
            elm.text(elm.text().substr(4));
            if(optGroup) optGroup.append(elm);
        }
        else
        {
            optGroup = $('<optgroup>').attr('label', elm.text());
            target.append(optGroup);
        }
    });
});

演示：http://jsfiddle.net/HUHRz/1/