javascript - 如何在select2框的最后添加新选项？

Question

我每次都尝试在选择框的最后添加 select2 选项，当我从 select2 选项中选择一个新选项时，它有时会添加第一个位置，有时会添加其他选项的最后一个或中间位置。

就像第一次我选择了 A。现在我想选择 B，并且我想要在框中的 A 之后选择 B。即 A|B ..但这并不是一直发生。

$('#destination').select2({allowClose: true});

.select2-container { width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://select2.github.io/select2/select2-3.5.1/select2.css" rel="stylesheet"/>
<script src="https://select2.github.io/select2/select2-3.5.1/select2.js"></script>

<select id="destination" class="destination form-control" multiple="multiple">
  <option value="kol">kolkata</option>
  <option value="ban">Bangalore</option>
  <option value="del">Delhi</option>
</select>

Answer 1

使用附加。

$("#add_option_b").on("click", function() {
  $("#select_id").append("<option value='B'>B</option>")
});

$("#add_option_c").on("click", function() {
  $("#select_id").append("<option value='C'>C</option>")
});

$("#add_option_d").on("click", function() {
  $("#select_id").append("<option value='D'>D</option>")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="select_id">
  <option value"A">A</select>
</select>
<br />
<br />
<button id="add_option_b">Add option B</button>
<br />
<br />
<button id="add_option_c">Add option C</button>
<br />
<br />
<button id="add_option_d">Add option D</button>

希望有帮助:)