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になるようにする必要があります。その後、次の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を使用すると、純粋なDOMAPIよりもはるかに簡単になります。

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>を使用して要素を作成し、グループになったばかりの要素でremove()<optgroup>を呼び出すことができます。何かのようなもの：<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 に答える