Question

如何使用select2更改数据占位符？

到目前为止，我已经尝试过了。

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

这就是......

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

但两者都不起作用。

Answer 1

我发现如果我只设置attr，例如$("#city").attr('data-placeholder', 'bar')，没有效果。但是，如果我设置attr然后在没有参数的情况下调用$("#city").select2()，则占位符会更新。

e.g。

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

Answer 2

寻找属性解决方案以避免更改JS代码的其他人。我只需要自己查看一个项目，看来select2只需要属性data-placeholder =“”。

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

在此处查看更多内容：select2 options reference

Answer 3

你也可以在模板（html）级别这样做。请务必在第一个标记上指定一个空白（例如“”）字符串。

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

或者我们可以通过javascript简单地为占位符添加数据属性，它应该在select2初始化之前发生。

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

DEMO

Answer 4

hack-y解决方案要多一些，但是不涉及重新启动整个select元素，这是添加以下扩展：

$.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);
};

这允许通过简单地编写来更新占位符：

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

Source

Answer 5

将它放在你的定位器使用的html中：

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

Answer 6

更直接的方法..

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

其中$id是选择元素的id

Answer 7

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

更新它

Answer 8

可以使用以下脚本：

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

如何在select2中更改占位符？

8 个答案: