使用 jQuery 将所选选项设置为多个列表

Question

我有一个来自数据库的列表，显示在 select 个多个标签中：

<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 的值数组，只需要 select 那些在 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>

同上。

Answer 1

您只需使用 .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>

Answer 2

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

这是我想出的，使用数组、循环、document.querySelector 和 setAttribute:

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>

使用 jQuery 将所选选项设置为多个列表

Set selected option to multiple list using jQuery

html

javascript

jquery

multiple-select