How to use placeholder as default value in select2 framework

Question

To get the chosen value of a select2 I'm using:

var x = $("#select").select2('data'); var select_choice = x.text 

The problem is this throws an error if not value has been selected and I was wondering if there was any way to make it return the placeholder if no option is selected

Answer 1

You have to add an empty option (i.e. <option></option>) as a first element to see a placeholder.

From Select2 official documentation :

"Note that because browsers assume the first option element is selected in non-multi-value select boxes an empty first option element must be provided (<option></option>) for the placeholder to work."

Hope this helps.

Example:

<select id="countries">     <option></option>     <option value="1">Germany</option>     <option value="2">France</option>     <option value="3">Spain</option> </select> 

and the Javascript would be:

$('#countries').select2({     placeholder: "Please select a country" }); 

Answer 2

Put this in your script file:

$('select').select2({     minimumResultsForSearch: -1,     placeholder: function(){         $(this).data('placeholder');     } }); 

And then in HTML, add the following code:

<select data-placeholder="Your Placeholder" multiple>     <option></option> <------ this is where your placeholder data will appear     <option>Value 1</option>     <option>Value 2</option>     <option>Value 3</option>     <option>Value 4</option>     <option>Value 5</option> </select>