Remove the selected option from select2 multiselect when changing.

Question

I have the following code. The goal is to create a select2 field with a text field as a search query. Therefore, I implemented it as a multi-segment, but I only need one option.

One option is to limit use maximumSelectionLength: 1. But in this case, the terminal message will be shown, which I do not want to do. (Even if I hide, some space will be occupied).

Another option is to hide everything except last-child, in which case the backend will be sent when the form is submitted.

So, is there a way to delete the current selected value when the new value is selected in the multi selector?

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

Run codeHide result

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

Hide result

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

Hide result

Answer 3

, :

multiple: false,

Answer 4

,

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