Remove selected option from select2 multiselect on change.

Question

I have the following code. The aim is to style a select2 box with textbox as the searchbox. So I have implemented it as multiselect , but I only want one option to be selected.

One option is to restrict using 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.

So is there a way to remove the currently selected value when the new value is selected in multiselect ?

I'm using select2 version 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

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

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

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