CODEWITHSUNDEEP
javascriptjqueryjquery-select2
Sooraj
Sooraj

Reputation: 10567

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

Upvotes: 4

Views: 14830

Answers (4)

R3tep
R3tep

Reputation: 12854

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

Upvotes: 3

Bharat Patel
Bharat Patel

Reputation: 197

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

Upvotes: 0

user181452
user181452

Reputation: 585

You are using a multi option select, I suggest you to do the following:

multiple: false,

Upvotes: 0

dundun
dundun

Reputation: 50

$('#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"/>

Upvotes: 2

Related Questions