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并检查数组中显示的内容。

＆＃13;

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

＆＃13;

<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>

＆＃13;

注1：您不能将数字用作HTML ID。这是不正确的：

<option id="6" ...

注2：您使用字符串内容进行搜索。如果您需要选择名称为＆＃39; Multiple3＆＃39;的所有项目那没关系。否则，最好使用value之类的唯一值：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

2 个答案: