Moyen simple rapide de sélectionner un ensemble de "optgroup" dans la boîte de sélection

J'ai une zone de liste dans laquelle je peux sélectionner plusieurs options. Dans la boîte de sélection sont multiples optgroups.
Est-il un moyen facile de sélectionner un ensemble de "optgroup" à la fois en javascript?

InformationsquelleAutor blub | 2009-09-24
  1. 4

    Je suggère l'utilisation de jQuery (ou un autre framework) afin de traiter rapidement les DOM sélections. Donner à chaque "optgroup" une classe pour le rendre plus facile à saisir.

    $("optgroup.className").children().attr('selected','selected');

    Si vous souhaitez sélectionner l'ensemble du groupe sur la base de l'utilisateur en sélectionnant le groupe, procédez de la manière suivante:

    $("optgroup.className").select(function(e) {
  $(this).children().attr('selected','selected');
});

    **Les deux exemples ne sont pas testés pseudo-code, mais ils devraient travailler avec un minimum de modifications, si nécessaire.

    Si vous ne pouvez pas utiliser un framework, vous devrez traverser le DOM vous-même pour trouver la "optgroup" et des enfants. Vous pouvez attacher un écouteur à l' select élément de saisir l'élément sélectionné, puis traverse les enfants de cette façon, aussi.

    • Hmm j'ai essayé de trouver une solution sans jQuery. Mais en regardant la façon simple de le faire; et de l'autre côté: la traversée par le dom.... Jquery c'est.
    • Je pense que beaucoup de gens s'en jQuery de cette façon. 😉
    • Traversant les DOM-même n'est pas très difficile, mais un cadre tout à fait, il est plus facile. document.getElementById('selectElementID') vous sélectionnez l'élément lui-même. Ensuite, c'est juste une question de parcours de ses enfants ou vous pouvez ajouter un écouteur d'événement pour capturer l'événement select et d'analyser si c'est votre choix "optgroup". Si oui, alors vous traverserait la "optgroup" les enfants et les sélectionner en tant que bien.
    • Que pointe, dans les plus récentes versions de jQuery, vous devez utiliser .prop() au lieu .attr() dans ce cas.
    InformationsquelleAutor Brandon Belvin
  2. 4

    Je suis généralement contre l'utilisation de jQuery pour des travaux simples comme ça, mais je peux voir sa valeur ici. Encore, si vous préférez un non-jQuery solution qui vous permettra d'avoir les avantages de l'utilisation de pas de bibliothèque, présentant aucun parasites de l'ids ou les classes et en cours d'exécution plus rapide, voici un:

    <script type="text/javascript">

function selectOptGroupOptions(optGroup, selected) {
    var options = optGroup.getElementsByTagName("option");
    for (var i = 0, len = options.length; i < len; i++) {
        options[i].selected = selected;
    }
}

function selectOptGroup(selectId, label, selected) {
    var selectElement = document.getElementById(selectId);
    var optGroups = selectElement.getElementsByTagName("optgroup");
    var i, len, optGroup;
    for (i = 0, len = optGroups.length; i < len; i++) {
        optGroup = optGroups[i];
        if (optGroup.label === label) {
            selectOptGroupOptions(optGroup, selected);
            return;
        }
    }
}

</select>

<select id="veg" multiple>
    <optgroup label="roots">
        <option>Swede</option>
        <option>Carrot</option>
        <option>Turnip</option>
    </optgroup>
    <optgroup label="leaves">
        <option>Spinach</option>
        <option>Kale</option>
    </optgroup>
</select>

<input type="button" onclick="selectOptGroup('veg', 'roots', true)" value="Select roots">

    Si votre <optgroup> a un id, vous pourriez finir avec la selectOptGroup fonction et vient de passer le de "optgroup" droit dans selectOptGroupOptions.

    InformationsquelleAutor Tim Down
  3. 2

    jquery:

    $('#myoptgroup option').attr('selected', true);
    InformationsquelleAutor Anatoliy
  4. 2

    J'ai essayé de faire la même chose tout à l'heure.

    J'ai voulu choisir un <optgroup>'s <option>s en cliquant sur le groupe de l'étiquette. La première tentative s'est déroulée comme suit:

    $('select > optgroup').click(function () {
    $(this).children().attr('selected', true);
});

    Cette solution de la moitié ont travaillé...

    En cliquant sur le <optgroup>s'étiquette de tous ses enfants sont devenus sélectionné.

    MAIS quand simplement en cliquant sur un <option> il était encore en sélectionnant toutes les autres <option>s dans le groupe! Le problème était de remontée d'événements, parce que l' <option> est à l'intérieur de la <optgroup> techniquement, vous êtes en cliquant trop.

    Donc la dernière pièce du puzzle était de réprimer la remontée d'événements à la hausse dans le cas où un <option> a été effectivement cliqué sur place. La solution finale est alors devenu:

    $('select > optgroup').click(function () {
    $(this).children().attr('selected', true);
});

$('select > optgroup > option').click(function (e) {
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
});

    Travail!

    MODIFIER

    Infuriatingly cela ne fonctionne pas travailler dans IE8 (et douteux < IE8 - peut-être IE9?)...

    Il décide d'ignorer totalement les événements click sur deux éléments. La seule alternative que je peux penser à est de positionner les éléments au-dessus de la "optgroup" étiquettes pour capturer les souris, mais c'est probablement pas la valeur de l'effort...

    InformationsquelleAutor Dan Turner