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>

我需要动态转换它，以便“类别”选项（任何不以“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更改值以实现所需的效果？

Answer 1

您必须迭代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();
        }
    });
});

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/

Answer 4

<div *ngFor="let joblist of jobList | range: team">
    {{joblist.team}}
</div>

使用jQuery动态添加optgroups

4 个答案: