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

【问题标题】：How to use javascript or jQuery to quickly select a preset of multi-select listbox items?如何使用 javascript 或 jQuery 快速选择预设的多选列表框项？
【发布时间】：2011-01-11 21:06:46
【问题描述】：

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

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

这将如何使用 jQuery 完成？

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

【问题讨论】：

标签： javascript multi-select

【解决方案1】：

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

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

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

【讨论】：

是的，我考虑过，让列表项知道它们所在的组，但是当它们成为组的原因超出了它们自己的属性时，这可能会很快变得不守规矩，比如“最受欢迎”糖果组，或者如果它们同时属于巧克力和焦糖组怎么办。
你可以说

【解决方案2】：

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

【讨论】：

【解决方案3】：

这可以解决问题：

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

【讨论】：

你认为哪个版本更快，jQuery 还是常规版本？
不管有没有 jQuery，它都不应该有很大的不同。