jqueryjquery-selectorsjquery-select2

How to use placeholder as default value in select2 framework

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

Solution

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

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