Question

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

我基本上做的是：

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

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

A被删除，然后在选择B时，A弹回。我想以某种方式触发select2:unselect事件，但我对如何......无能为力。

Answer 1

这应该有效，请删除已生成select2并将selected设置为false到select标记：

＆＃13;

$(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);
})

＆＃13;

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

＆＃13;

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

见下面的代码：

＆＃13;

$(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");
})

＆＃13;

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

＆＃13;

select2 v4以编程方式删除标记

1 个答案: