javascript - 如何在多个选择列表中设置选定值

Question

Demo Link

多选列表:

<select id="fruits" name="fruits" multiple="multiple">
    <option value="1">Apple</option>
    <option value="2">Mango</option>
    <option value="3">Orange</option>
 </select>

脚本代码:

var groups=["Apple","Orange"]; //Only Apple and orange values should be selected
$('#fruits').val(groups); 

Answer 1

您应该正确设置值。截至目前，您传递的是文本而不是值。

var groups=[1,3];

var groups=[1,3];
$('#fruits').val(groups); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="fruits" name="fruits" multiple="multiple">
    <option value="1">Apple</option>
    <option value="2">Mango</option>
    <option value="3">Orange</option>
 </select>

但是您仍然想使用文本，即 ["Apple","Orange"];，.filter() 方法可以与 一起使用。属性()

var groups = ["Apple", "Orange"];
$('#fruits option').filter(function() {
  return groups.indexOf($(this).text()) > -1; //Options text exists in array
}).prop('selected', true); //Set selected

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="fruits" name="fruits" multiple="multiple">
  <option value="1">Apple</option>
  <option value="2">Mango</option>
  <option value="3">Orange</option>
</select>