Как использовать javascript или jQuery для быстрого выбора предустановки из нескольких элементов списка? - PullRequest
0 голосов
/ 01 февраля 2010

Допустим, на моей странице есть список индексов «1,3,4,5,9,12» и список с множественным выбором, содержащий 12 элементов.

Какой быстрый способ использовать javascript для указания списку для множественного выбора всех элементов в этих индексах?

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

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

Ответы [ 3 ]

1 голос
/ 01 февраля 2010

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

<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;
    }
}
0 голосов
/ 01 февраля 2010

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

0 голосов
/ 01 февраля 2010

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

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

Edit:

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

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

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

...