select2 中的预加载值，其中多个 select2 使用相同的 class 初始化

Question

我在一个页面上使用多个 select2，在所有元素上具有 multiSelect class，并通过一次调用在所有元素上初始化 select2

$('.multiSelect').select2();

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
  
<select class="multiSelect" multiple>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
  <option>Four</option>
</select>

<select class="multiSelect" multiple>
  <option>First</option>
  <option>Second</option>
  <option>Third</option>
  <option>Fourth</option>
</select>

现在我选择一些值，点击保存按钮时，每个 select2 的所有值都保存在数据库中，现在我进入更新页面，我希望每个 select2 都带有我选择的值。

我看到这里回答的方法Load values in select2 multiselect但是我不能加载静态值我想加载保存在数据库中的值根据每个select2调用。

Answer 1

我找到了解决这个问题的方法。而不是在 JS 中编写代码，我只是在我希望默认选择的选项及其工作中添加 selected 属性。

$('.multiSelect').select2();

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
  
<select class="multiSelect" multiple>
  <option>One</option>
  <option selected>Two</option>
  <option>Three</option>
  <option>Four</option>
</select>

<select class="multiSelect" multiple>
  <option>First</option>
  <option>Second</option>
  <option>Third</option>
  <option>Fourth</option>
</select>

The element having selected attribute will come selected by default.

select2 中的预加载值，其中多个 select2 使用相同的 class 初始化

Preloaded values in select2 where multiple select2 is initialised with same class

html

database

ajax

jquery

select2