[英]Remove selected option from select2 multiselect on change.
I have the following code. 我有以下代码。 The aim is to style a select2 box with textbox as the searchbox.
目的是将带有文本框的select2框设置为搜索框。 So I have implemented it as multiselect , but I only want one option to be selected.
所以我把它实现为多选,但我只想选择一个选项。
One option is to restrict using maximumSelectionLength: 1
. 一种选择是限制使用
maximumSelectionLength: 1
。 But in this case the limit message will be shown which i do not want to happen. 但在这种情况下,将显示限制消息,我不希望发生。 (Even if i hide it some space will be taken up ).
(即使我隐藏它也会占用一些空间)。
Other option is to hide everything other than last-child
, in that case multiple values will be send to backend when form is submitted. 其他选项是隐藏除了
last-child
之外的所有内容,在这种情况下,在提交表单时会将多个值发送到后端。
So is there a way to remove the currently selected value when the new value is selected in multiselect ? 那么有多种方法可以在multiselect中选择新值时删除当前选定的值?
I'm using select2 version 3.5.2 我正在使用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"/>
You can only keep the last selected item and remove all other. 您只能保留最后选择的项目并删除所有其他项目。 Like this way :
像这样:
$('#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"/>
$('#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"/>
您正在使用多选项选择,我建议您执行以下操作:
multiple: false,
just add the following code in your query and it will work as you need it 只需在查询中添加以下代码,它就可以根据需要运行
$('ul.select2-choices').on("click", function() {
$("ul.select2-choices li .select2-search-choice-close").click();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.