How to change placeholder in select2?

For other people looking for an attribute solution to avoid changing JS code. I just had to look this up myself for a project, and it seems select2 just needs the attribute data-placeholder="".

<select id="city" data-placeholder="my placeholder"></select>

See more here: select2 options reference

I found that if I just set the attr e.g. $("#city").attr('data-placeholder', 'bar'), there is no effect. However, if I set the attr and then call $("#city").select2() with no arguments, then the placeholder updates.

e.g.

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

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