更改多选的选定项目

Question

我有一个很大的 multiselect 列表，我想从中获取所有选项，deselect 它们和 select 基于预定义标准的新选项。

例如

<select>
  <option value='1' selected></option>
  <option value='2'></option>
  <option value='3'></option>
  <option value='4' selected></option>
</select>

我收到要求，例如 selects 必须是 2 和 4。问题是我如何 select 2 和 4 和 deselect 所有其他的，以便它可以快速有效地工作（考虑到这将有数千行数据）

 $("select").val("2");

我想到了这个，但据我所知它只适用于一个值。如有任何帮助，我们将不胜感激。

Answer 1

首先你需要将你的 select 设置为 multi-selectable:

<select multiple id='select'>
  <option value='1' selected>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
  <option value='4' selected>4</option>
</select>

接下来，您可以 select 所有 selected 选项，并取消 select 它们：

$('#select').find("option:selected").prop("selected", false);

最后，您 select 您确实想要 selected 的人，并将它们设置为 selected:

$('#select').find("option[value='2'], option[value='4']").prop("selected", true);

片段：

$('#select').find("option:selected").prop("selected", false);
$('#select').find("option[value='2'], option[value='4']").prop("selected", true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple id='select'>
  <option value='1' selected>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
  <option value='4' selected>4</option>
</select>

Answer 2

您需要找到合适的选项，select它们：

$('#foo > option').
  prop('selected', false).             // deselect by default
  filter("[value='2'],[value='4']").   // find our matches
  prop('selected', true);              // select them

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="foo" multiple>
  <option value='1' selected>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
  <option value='4' selected>4</option>
</select>

更改多选的选定项目

Change selected items of a multiselect

performance

jquery