Comment utiliser javascript ou jQuery pour sélectionner rapidement un préréglage d'éléments listbox sélectionner plusieurs?

Question

Donc, dire ma page a une liste des index '1,3,4,5,9,12' et une zone de liste multi-sélection avec 12 éléments qu'il contient.

Ce qui est un moyen rapide d'utiliser le javascript pour dire la zone de liste à multi-sélectionner tous les éléments à ces indices?

Comment cela se fait en utilisant jQuery?

Ainsi, par exemple, si l'utilisateur sélectionne le préréglage « caramel » associé à la listbox « candybar », il sélectionnera toutes les barres de bonbons qui ont caramel ... Je pense que vous avez l'idée.

Answer 1

Cela pourrait faire l'affaire:

<select id="select" multiple="multiple">
    <option value="1">test 1</option>
    <option value="2">test 2</option>
    <option value="3">test 3</option>
    <option value="4">test 4</option>
    <option value="5">test 5</option>
    <option value="6">test 6</option>
    <option value="7">test 7</option>
    <option value="8">test 8</option>
    <option value="9">test 9</option>
    <option value="10">test 10</option>
    <option value="11">test 11</option>
    <option value="12">test 12</option>
</select>

Javascript (jQuery):

indexes = [1,3,4,5,9,12]
$(document).ready(function(){
    for(i=0; i<indexes.length; i++){
        $('#select option:eq(' + (indexes[i]-1) + ')').attr('selected', 'selected');
    }
});

Sans jQuery:

window.onload = function(){
    var indexes = [1,3,4,5,9,12];
    var options = document.getElementById('select').options;
    for(i=0; i<indexes.length; i++){
        options[indexes[i]-1].selected = true;
    }
}

Answer 2

module de sélection a une méthode de selectOptions(value[, clear]) qui sélectionne des valeurs multiples dans une zone de sélection. Mais il prend les valeurs comme paramètre au lieu des indices.

Answer 3

Vous feriez mieux de fixer des cours sur les éléments d'options et de les traiter de cette façon, plutôt que par l'indice:

<select id="my-select">
  <option class="caramel">Twix</option>
  <option>Mounds</option>
  <option class="caramel">Milky Way</option>
  <!-- ... -->
</select>

Et puis:

$("option.caramel", "#my-select").each(function () { this.selected = true });

Edit:

Mais si vous voulez vraiment le faire par index, vous pouvez faire:

function selectOptionsByIndex(select, indexes) {
    var i = 0;
    select.children().each(function (j) { if (indexes[i] == j) { ++i; this.selected = true } });
}

selectOptionsByIndex($("#my-select"), [ 1, 3, 4, 5, 9, 12 ]);

(Cela dépend de la liste des index fournis étant dans l'ordre croissant.)