2016-12-06 39 views
5

选择到多个名单上有从DB列表被显示在选择的多个标签:适用:使用jQuery

<select multiple="multiple" id="list" name="color"> 
 
    <option value="1">Red</option> 
 
    <option value="2">Green</option> 
 
    <option value="3">Blue</option> 
 
    <option value="4">Magenta</option> 
 
    <option value="5">Black</option> 
 
    <option value="6">Cyan</option> 
 
    <option value="7">Yellow</option> 
 
</select>

给定的值的从DB的数组,需要选择只有那些在DB数组中找到的项目,例如[2,4,7]。我如何使用jQuery将attr('selected')推送到这些选项标签?

<select multiple="multiple" id="list" name="color"> 
 
    <option value="1">Red</option> 
 
    <option value="2" selected="selected">Green</option> 
 
    <option value="3">Blue</option> 
 
    <option value="4" selected="selected">Magenta</option> 
 
    <option value="5">Black</option> 
 
    <option value="6">Cyan</option> 
 
    <option value="7" selected="selected">Yellow</option> 
 
</select>

上面一样。

回答

9

您刚刚使用.val()

$('#list').val([2,4,7]); 

希望这有助于。

$('#list').val([2,4,7]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select multiple="multiple" id="list" name="color"> 
 
    <option value="1">Red</option> 
 
    <option value="2">Green</option> 
 
    <option value="3">Blue</option> 
 
    <option value="4">Magenta</option> 
 
    <option value="5">Black</option> 
 
    <option value="6">Cyan</option> 
 
    <option value="7">Yellow</option> 
 
</select>

+1

我不知道'缬氨酸()'了一个数组。很好的答案。 –

2

为了完整起见,我想我会添加一个简单的JavaScript解决方案。

这就是我想出了,使用数组,循环,document.querySelectorsetAttribute

var preSelected = [2,4,7]; 
 

 
for (var i = 0; i < preSelected.length; i++) { 
 
var option = document.querySelector('#list option[value="' + preSelected[i] + '"]'); 
 
option.setAttribute('selected','selected'); 
 
}
<select multiple="multiple" id="list" name="color"> 
 
<option value="1">Red</option> 
 
<option value="2">Green</option> 
 
<option value="3">Blue</option> 
 
<option value="4">Magenta</option> 
 
<option value="5">Black</option> 
 
<option value="6">Cyan</option> 
 
<option value="7">Yellow</option> 
 
</select>

+0

我真的不明白我在做错的地方... https://jsfiddle.net/sealview/49drqsse/1/ – sealview

+0

你有'$(document).readu'而不是'$(document) .ready'。 – Rounin