Wie Javascript oder jQuery verwenden, um schnell eine Voreinstellung von Multi-Select-Listbox Elemente auszuwählen?

Question

sagt Also meine Seite hat eine Liste von Indizes ‚1,3,4,5,9,12‘ und eine Multi-Select-List-Box mit 12 Stück drin.

Was zu verwenden JavaScript ein schneller Weg, um das Listenfeld zu sagen Multi wählen Sie alle Elemente an diesen Indizes?

Wie würde dies geschehen jQuery?

So zum Beispiel, wenn der Benutzer wählt die ‚Caramel‘ Preset im Zusammenhang mit dem ‚Candybar‘ listbox, wird es alle Süßigkeiten Bars wählen, die Karamell haben ... Ich glaube, Sie bekommen die Idee.

Answer 1

Dies könnte den Trick tun:

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

Ohne 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

Die jquery wählen Plugin hat eine selectOptions(value[, clear]) Methode, die mehrere Werte auswählt in einem Auswahlfeld. Aber es braucht die Werte als Parameter anstelle von Indizes.

Answer 3

Sie wären besser dran Klassen auf die Option Elemente setzen und sie auf diese Weise Adressierung, anstatt durch den Index:

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

Und dann:

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

Edit:

Aber wenn Sie es wirklich von Index tun mögen, könnten Sie tun:

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

(Dies ist abhängig von der Liste der gelieferten Indizes in aufsteigender Reihenfolge zu sein.)