如何更改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

I found that if I just set the attr eg $("#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.

eg

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

Answer 2

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

Answer 3

You can also do it like this in the template (html) level. Just be sure to assign a blank (eg "") 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

Answer 4

A more direct way ..

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

where $id is the id of the select element

Answer 5

A bit more of a hack-y solution, but one that doesn't involve re-initiating the entire select element is to add the following extensions:

$.fn.getSelect2Placeholder = function () {
    var $select2Container = $(this).data('select2').$container;
    return $select2Container.find('.select2-selection__placeholder').text();
};
$.fn.setSelect2Placeholder = function (placeholder) {
    var $select2Container = $(this).data('select2').$container;
    return $select2Container.find('.select2-selection__placeholder').text(placeholder);
};

This allows for updating the placeholder by simply writing:

$('#the-id-of-your-select2-element').setSelect2Placeholder("Your placeholder text.");

Source

Answer 6

把它放在你的定位器使用的 html 中，如下所示：

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

Answer 7

对于 select2 版本 4，我在 js init 代码中指定了占位符文本，然后使用$select.select2{placeholder:"updated text..."}更新它

Answer 8

可以使用以下脚本：

$("#city").attr('placeholder', 'your text here' );