How to change placeholder in select2?

Question

How do I change the data placeholder with select2?

So far I've tried this.

$("#city").select2({placeholder:"foo"});

And this...

$("#city").attr("data-placeholder","bar");

But neither works.

Answer 1

A more direct way ..

$('#select2-' + $id + '-container').find('.select2-selection__placeholder').text('Your Text');

where $id is the id of the select element

Answer 2

You can also do it like this in the template (html) level. Just be sure to assign a blank (e.g. "") string on your first tag.

<select id="city" data-placeholder="Select Anything">
  <option value=""></option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

or we can simply add a data attribute for placeholder via javascript and it should happen before select2 gets initialized.

$('#city').data('placeholder','This is a placeholder');

DEMO