在HTML多选列表中选择选项的最佳方法

Question

我正在寻找最佳方法，jQuery或纯JS来选择在多选列表中找到的选项。

基本选项列表是这样的：

<select id="multiple" multiple="multiple"> 
    <option id="1" value="1">Multiple1</option> 
    <option id="2" value="2">Multiple2</option> 
    <option id="3" value="3">Multiple3</option> 
    <option id="4" value="4">Multiple3</option> 
    <option id="5" value="5">Multiple3</option> 
    <option id="6" value="6">Multiple3</option> 
</select> 

我有一个JS数组[“Multiple1”，“Multiple3”]

我想在列表中选择自动发现阵列选项。所以我的名单将是：

<select id="multiple" multiple="multiple"> 
    <option id="1" value="1" selected>Multiple1</option> 
    <option id="2" value="2">Multiple2</option> 
    <option id="3" value="3" selected>Multiple3</option> 
    <option id="4" value="4">Multiple3</option> 
    <option id="5" value="5">Multiple3</option> 
    <option id="6" value="6">Multiple3</option> 
</select> 

请帮助。

Answer 1

您可以简单地循环访问option，然后检查数组中显示的这些数据。

var selected = ['Multiple1', 'Multiple3']; 
 

 
$("#multiple > option").each(function() { 
 
    var name = $(this).text(); 
 
    if ($.inArray(name, selected) !== -1) 
 
     $(this).prop('selected', true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="multiple" multiple="multiple"> 
 
    <option id="1" value="1">Multiple1</option> 
 
    <option id="2" value="2">Multiple2</option> 
 
    <option id="3" value="3">Multiple3</option> 
 
    <option id="4" value="4">Multiple3</option> 
 
    <option id="5" value="5">Multiple3</option> 
 
    <option id="6" value="6">Multiple3</option> 
 
</select>

注1：不能使用数字作为一个HTML ID。这是不正确的：

<option id="6" ... 

注2：您使用字符串的内容进行搜索。如果您需要选择全部名称为“Multiple3”的项目，那就可以了。否则，它是更好地使用独特的价值像value：

var selected = ["1", "3", "5", "6"]; 
 

 
$("#multiple > option").each(function() { 
 
    var val = $(this).val(); 
 
    if ($.inArray(val, selected) !== -1) 
 
    $(this).prop('selected', true); 
 
}); 
 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="multiple" multiple="multiple"> 
 
     <option id="1" value="1">Multiple1</option> 
 
     <option id="2" value="2">Multiple2</option> 
 
     <option id="3" value="3">Multiple3</option> 
 
     <option id="4" value="4">Multiple3</option> 
 
     <option id="5" value="5">Multiple3</option> 
 
     <option id="6" value="6">Multiple3</option> 
 
    </select>

Answer 2

1206ms

$("#multiple > option").filter(function(id,item) { 
return $.inArray($(this).text(), selected) !== -1}).prop('selected', true); 
}; 

1610ms

$("#multiple > option").each(function() { 
var name = $(this).text(); 
if ($.inArray(name, selected) !== -1) 
    $(this).prop('selected', true); 
}); 

JSFiddle