11 
<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，将 whaterver 包装在它之后直到下一个 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 实现所需的效果？

4

4 回答 4

20

您必须遍历option元素并根据它们的内容对它们进行分组。使用 jQuery 比单纯的 DOM API 更容易：

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();
        }
    });
});
于 2012-09-24T09:09:41.883 回答
6

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

从那里，您可以对这些元素使用wrapAll()<option>来创建它们的元素，然后对刚刚成为组的元素<optgroup>调用remove() 。<option>就像是：

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

你可以在这个 fiddle中看到结果。

于 2012-09-24T09:20:17.283 回答
2

我的实现：

$(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/

于 2012-09-24T09:37:21.430 回答
2 
$.each(data, function () {

    if (prevGroupName.indexOf(this.Group.Name) == -1) {
        $prevGroup = $('<optgroup />').prop('label', this.Group.Name).appendTo('#ConfigurationId');
    } else {
        $prevGroup = $("optgroup[label='" + this.Group.Name + "']");
    }
    $("<option />").val(this.Value).text(this.Text).appendTo($prevGroup);
    prevGroupName.push(this.Group.Name);
});
于 2017-09-13T18:38:54.453 回答