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

Question

所以说我的页面有一个索引列表'1,3,4,5,9,12'和一个包含12个项目的多选列表框。

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

这将如何使用 jQuery 完成？

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

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

您最好在选项元素上设置类并以这种方式解决它们，而不是通过索引：

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

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

Answer 3

jquery select 插件有一个selectOptions(value[, clear])在选择框中选择多个值的方法。但它将值作为参数而不是索引。