Как использовать JavaScript или jQuery, чтобы быстро выберите предустановку элементов Multi-Select ListBox?

Question

Итак, скажите, что моя страница имеет список индексов «1,3,4,5,9,12» и многоквартирный список с 12 элементами в нем.

Какой быстрый способ использовать JavaScript, чтобы сообщить об этом списке для Multi-Select Все элементы на этих индексах?

Как это будет сделано с помощью jQuery?

Таким образом, если пользователь выбирает предустановку «CARAMEL», связанный с «CandyBar» ListBox, он выберет все бары конфет, которые имеют карамель ... Я думаю, что вы получите идею.

Answer 1

Это может сделать трюк:

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

Без 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

Jquery. Выберите плагин имеет selectOptions(value[, clear]) Способ, который выбирает несколько значений в поле выбора. Но это принимает значения в качестве параметра вместо индексов.

Answer 3

Вам будет лучше настроить классы на элементах параметра и обращение к ним таким образом, а не по индексу:

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

А потом:

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

Редактировать:

Но если вы действительно хотите сделать это по индексу, вы можете сделать:

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

(Это зависит от списка поставленных индексов, находящихся в порядке возрастания.)