select2 v4 以编程方式删除标签

Question

我想删除之前选择的 select2 多选 <li> 元素，但我有一个问题 - 小提琴： https://jsfiddle.net/64nxhLc1/44/

我在做的基本上是这样的：

   $("button").click(function() {
      $("li-i-want-removed").remove();
    });

这确实删除了内部标记，但是下次我选择其他内容时，我会自动填充上一个。

a被删除，然后选择b时，右后面弹出弹出。 我想以某种方式触发select2:unselect 事件，但我不知道如何...

Answer 1

这应该可以，删除 li 生成的 select2 并将 selected 设置为 false 到选择标签：

$(function () {
    $('#myselect').select2({
        placeholder: "select option",
        tags:true
    });
});

$("button").click(function() {
   // remove the li node at first 
   $("#myselect").next(".select2").find("li[title='A']").remove();
   // set the select with value A to unselected
   $("#myselect").find("option[value='A']").prop("selected",false);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<button>
remove A
</button>

<div style="margin:30px; height:400px;">


<select id="myselect" multiple = "multiple" style="min-width:300px;">
  <option></option>
  <option value='A'>A</option>
  <option value='B'>B</option>
  <option value='C'>C</option>
</select>

</div>

您也可以使用更改事件，因此先取消选择值，然后触发change，它会自动从选择中删除 li：

参见下面的 sn-p ：

$(function () {
    $('#myselect').select2({
        placeholder: "select option",
        tags:true
    });
});

$("button").click(function() {
   // set the select with value A to unselected
   $("#myselect").find("option[value='A']").prop("selected",false);
   $("#myselect").trigger("change");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<button>
remove A
</button>

<div style="margin:30px; height:400px;">


<select id="myselect" multiple = "multiple" style="min-width:300px;">
  <option></option>
  <option value='A'>A</option>
  <option value='B'>B</option>
  <option value='C'>C</option>
</select>

</div>