如何更改select2中的占位符？

Posted 2023-05-07

【中文标题】如何更改select2中的占位符？

【英文标题】：How to change placeholder in select2?

【发布时间】：2013-10-04 11:16:06

【问题描述】：

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

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

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

还有这个……

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

但两者都不起作用。

【问题讨论】：

它应该可以工作。见小提琴jsfiddle.net/JZQ3Q请在这个小提琴中复制你的问题。

【参考方案1】：

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

例如

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

【讨论】：

您也可以在实例化后通过select2 更新占位符，而不更改周围的元素（例如$("#city").select2( placeholder: "bar" );）。

无论如何，（重新）在元素上应用select2() 也会丢失之前通过javascript 设置在该元素上的任何潜在选项

【参考方案2】：

对于寻求属性解决方案以避免更改 JS 代码的其他人。我只需要自己查找一个项目，似乎 select2 只需要属性 data-placeholder=""。

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

在此处查看更多信息：select2 options reference

【讨论】：

介意告诉我为什么投反对票吗？我只是想提供帮助，但我看不出在这种情况下我做错了什么？

【参考方案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

【参考方案4】：

更直接的方式..

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

其中$id 是选择元素的id

【参考方案5】：

更多一点的 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

【参考方案6】：

将其放入您的定位器使用的 html 中，如下所示：

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

【讨论】：

更改为数据占位符，它适用于 select2。 <select id="city" data-placeholder="my placeholder"></select>

【参考方案7】：

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

【参考方案8】：

可以使用以下脚本：

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