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

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

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

Comments

[Rahul Patel]

You can achieve only one select by multiple: false; Do you face any problem with it?

[Sooraj]

It cannot be done , That was the prime use. In single select the searchbox will appear instead of searching in textbox.

[Sooraj]

It cannot be done , That was the prime use. In single select the searchbox will appear instead of searching in textbox , i want to search directly in the textbox instead of the select2 custom searcbox.

[dundun]

see this thread, maybe it can help stackoverflow.com/questions/20223044/…