How to use placeholder as default value in select2 framework
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"});
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>
$('#ddlSelect').prepend('<option selected=""></option>').select2({placeholder: "Select Month"});