在更改时从select2 multiselect中删除所选选项。

Question

我有以下代码。 目的是将带有文本框的select2框设置为搜索框。 所以我把它实现为多选，但我只想选择一个选项。

一种选择是限制使用maximumSelectionLength: 1 。 但在这种情况下，将显示限制消息，我不希望发生。 （即使我隐藏它也会占用一些空间）。

其他选项是隐藏除了last-child之外的所有内容，在这种情况下，在提交表单时会将多个值发送到后端。

那么有多种方法可以在multiselect中选择新值时删除当前选定的值？

我正在使用select2版本3.5.2

 $('#placeSelect').select2({ width: '100%', allowClear: true, multiple: true, placeholder: "Click here and start typing to search.", data: [ { id: 1, text: "Honolulu" }, { id: 2, text: "Tokyo" }, { id: 3, text: "Delhi" }, { id: 4, text: "Zurich" } ] }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script> <link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/> <h3>Select a value</h3> <input type="text" id="placeSelect"/> 

Answer 1

您只能保留最后选择的项目并删除所有其他项目。 像这样：

 $('#placeSelect').click(function () { var t = $("#placeSelect").val().substr($("#placeSelect").val().length - 1); $("#placeSelect").val(t).trigger("change"); }); $('#placeSelect').select2({ width: '100%', allowClear: true, multiple: true, placeholder: "Click here and start typing to search.", data: [ { id: 1, text: "Honolulu" }, { id: 2, text: "Tokyo" }, { id: 3, text: "Delhi" }, { id: 4, text: "Zurich" } ] }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script> <link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/> <h3>Select a value</h3> <input type="text" id="placeSelect"/> 

Answer 2

 $('#placeSelect').select2({ width: '100%', allowClear: true, multiple: false, placeholder: "Click here and start typing to search.", data: [ { id: 1, text: "Honolulu" }, { id: 2, text: "Tokyo" }, { id: 3, text: "Delhi" }, { id: 4, text: "Zurich" } ] }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script> <link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/> <h3>Select a value</h3> <input type="text" id="placeSelect"/> 

Answer 3

您正在使用多选项选择，我建议您执行以下操作：

multiple: false,

Answer 4

只需在查询中添加以下代码，它就可以根据需要运行

$('ul.select2-choices').on("click", function() {
    $("ul.select2-choices li .select2-search-choice-close").click();
  });