jquery - 使用 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>

我需要动态转换它，以便“类别”选项(任何不以“项目”开头的选项)是一个 optgroup，包装它后面的任何内容，直到下一个类别选项，所以上面的结果看起来像:

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