I have the following multiple drop-down lists defined using select2 but the placeholders don't work?

<select class="js-select2" multiple="multiple" placeholder="Select State">
     <option value="AK">Alaska</option>
     <option value="HI">Hawaii</option>
</select>

<select class="js-select2" multiple="multiple" placeholder="Select Fruits">
     <option value="Apples">Apples</option>
     <option value="Oranges">Oranges</option>
</select>

<script>
    $(".js-select2").select2({
      // placeholder: 'Select an option...'
   });

</script>

It only works if I define the placeholder inside the select2 option list (mented out above) but I want to use a single class to initialize all select2 multiselects drop-downs and display different placeholders.

Is it possible to achieve this?

I have the following multiple drop-down lists defined using select2 but the placeholders don't work?

<select class="js-select2" multiple="multiple" placeholder="Select State">
     <option value="AK">Alaska</option>
     <option value="HI">Hawaii</option>
</select>

<select class="js-select2" multiple="multiple" placeholder="Select Fruits">
     <option value="Apples">Apples</option>
     <option value="Oranges">Oranges</option>
</select>

<script>
    $(".js-select2").select2({
      // placeholder: 'Select an option...'
   });

</script>

It only works if I define the placeholder inside the select2 option list (mented out above) but I want to use a single class to initialize all select2 multiselects drop-downs and display different placeholders.

Is it possible to achieve this?

• javascript
• jquery
• jquery-select2

• your above mented line will not even work if you do not have an empty <option> at zero index. – Afnan Ahmad Commented Feb 3, 2017 at 10:04
• @Afnan it does work because its a multi select. – adam78 Commented Feb 3, 2017 at 10:05

4 Answers 4

For a quick workaround, you can pass the value of the attribute to the placeholder option:

 $(".js-select2").each(function() {
    $(this).select2({
       placeholder: $(this).attr('placeholder')
   });
 });

This does not work when using $(".js-select2").select2() directly, I assume in that context this doesn’t point to the right object (or something like that). But if you use an each loop to initialize it on each element separately, it works.

https://jsfiddle/84whaced/

Alternatively, it should work if you use data-placeholder in the HTML (amazing what we can find out once we check the documentation, right?), see https://select2.github.io/options.html#data-attributes - https://jsfiddle/84whaced/1/

This would be the preferred option, I think.

It will work as:

If we just set the attr e.g. $("#state").attr('data-placeholder', 'Select State'), there will no effect.

However, if we set the attr and then call $("#state").select2() with no arguments, then the placeholder updates.

$("#state").attr("data-placeholder","Select State");
$("#state").select2();

You can use the data-placeholder for different placeholder for every select

$('select').select2({
    placeholder: function(){
        $(this).data('placeholder');
    }
});

<select class="js-select2" multiple="multiple"  data-placeholder="Select State">
     <option value="AK">Alaska</option>
     <option value="HI">Hawaii</option>
</select>

<select class="js-select2" multiple="multiple"  data-placeholder="Select Fruits">
     <option value="Apples">Apples</option>
     <option value="Oranges">Oranges</option>
</select>

You can check the Demo as well.

Maybe you have similar ids on your page. JS'll select latest id by default. Try to change them.