在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