L'ajout de optgroups dynamiquement à l'aide de jQuery

<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>

J'ai besoin de convertir dynamiquement ce donc que la "Catégorie" des options (tout ce qui ne commence pas par "le point") est un "optgroup", d'emballage whaterver vient après lui jusqu'à la prochaine Catégorie de l'option, de sorte que le ci-dessus pourrait finir par ressembler à:

<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>

Comment puis-je effectuer une itération en cours et de modifier les valeurs pour obtenir l'effet désiré à l'aide de jQuery?

Solution: reportez-vous à jsbin.com/nagohevoyi/1/edit?html,js,sortie AJS.$("#select2-example").append('<optgroup id="opt-gr1" label="Group test"></optgroup>'); AJS.$("#opt-gr1").append('<option>test</option>'); AJS.$("#opt-gr1").append('<option>test2</option>');

OriginalL'auteur key2starz | 2012-09-24

  1. 19

    Vous devez effectuer une itération sur les option éléments et de les regrouper en fonction de leur contenu. À l'aide de jQuery rend plus facile que juste de la pure API 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();
        }
    });
});
    Tout à fait élégante solution!
    superbe !! aidé tout de suite

    OriginalL'auteur

  2. 6

    Vous pouvez utiliser filtre() pour correspondre à la <option> éléments qui vont devenir des groupes. Ensuite, vous pouvez effectuer une itération sur eux et de les appeler nextUntil() sur le même élément définie pour correspondre à des options autres (comme nextUntil() s'arrête lorsqu'il rencontre un membre de l'ensemble, c'est à dire l'option suivante qui devrait devenir un groupe).

    À partir de là, vous pouvez utiliser wrapAll() sur ces <option> éléments pour créer leur <optgroup> élément, puis d'appeler supprimer() sur le <option> élément qui est devenu un groupe. Quelque chose comme:

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

    Vous pouvez voir les résultats dans ce violon.

    J'aime l'utilisation de wrapAll -- je n'étais pas sûr de la façon de l'utiliser si je ne savais pas à l'avance les éléments pour y aller (j'ai vu un exemple où le nombre d'éléments à ajouter à un "optgroup" ont été corrigés). Merci beaucoup.
    +1 cette approche a fonctionné pour moi, cependant, il a travaillé seulement après avoir fait une actualisation de la multiselect - $("#myElement").multiselect('refresh'); donc cela peut sauver quelqu'un d'autre une demi-journée de casse-tête

    OriginalL'auteur

  3. 2

    Ma mise en œuvre:

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

    Démo: http://jsfiddle.net/HUHRz/1/

    OriginalL'auteur

  4. 1
    $.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);
});

    OriginalL'auteur