如何使用 javascript 或 jQuery 快速选择预设的多选列表框项目？

Question

假设我的页面有一个索引列表“1,3,4,5,9,12”和一个包含 12 个项目的多选列表框。

使用 javascript 告诉列表框多选这些索引处的所有项目的快速方法是什么？

使用 jQuery 如何做到这一点？

因此，例如，如果用户选择与“candybar”列表框关联的“焦糖”预设，它将选择所有具有焦糖的糖果......我想您明白了。

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

Without 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 select 插件 有一个 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 ]);

这取决于列表提供的索引按升序排列。）