Cómo utilizar javascript o jQuery para seleccionar rápidamente un preset de selección múltiple de elementos cuadro de lista?

Question

Así que decir que mi página tiene una lista de índices '1,3,4,5,9,12' y un cuadro de lista de selección múltiple con 12 elementos en ella.

¿Qué es una forma rápida de uso javascript para decirle al cuadro de lista de selección múltiple de todos los artículos en esos índices?

¿Cómo podría hacerse esto con jQuery?

Así por ejemplo, si el usuario selecciona el 'caramelo' preestablecido asociado con el 'candybar' cuadro de lista, se seleccionará todos los dulces que tienen caramelo ... creo que se entiende la idea.

Answer 1

Esto podría hacer el truco:

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

Sin 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

El jquery Seleccione el plugin tiene un método selectOptions(value[, clear]) que selecciona varios valores en un cuadro de selección. Pero toma los valores de parámetros en lugar de índices.

Answer 3

estaría mejor ajuste de las clases en los elementos de opción y dirigirse a ellos de esa manera, en lugar de por el índice:

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

Y a continuación:

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

Editar:

Pero si realmente quiere hacerlo por el índice, se puede hacer:

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 ]);

(Esto depende de la lista de índices suministrados son en orden ascendente.)