How to change placeholder in select2?

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.

5 Answers
5

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.

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

$("#city").select2()

e.g.

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


select2

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

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

Put it in the html that your locator uses like this:

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


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

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 class="test-select2" data-placeholder="Select Anything">
<option value=""></option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>


DEMO

For select2 version 4 I specified the placeholder text in js init code and then update it using $select.select2{placeholder:"updated text..."}

$select.select2{placeholder:"updated text..."}

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.