10

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

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

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

和这个...

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

但两者都不起作用。

4

8 回答 8

12

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

例如

$("#city").attr("data-placeholder","bar");
$("#city").select2();
于 2013-09-30T04:14:53.027 回答
5

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

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

在此处查看更多信息：select2 选项参考

于 2015-04-30T22:50:28.013 回答
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');

演示

于 2016-12-19T04:52:00.063 回答
2

更直接的方法..

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

选择元素的$id在哪里id

于 2018-07-13T12:54:02.773 回答
2

更多的 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.");

资源

于 2020-05-19T11:00:44.900 回答
1

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

<select id="city" placeholder="my placeholder"></select>
于 2014-02-07T16:27:00.897 回答
0

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

于 2015-09-02T11:26:18.687 回答
0

可以使用以下脚本：

$("#city").attr('placeholder', 'your text here' );
于 2021-01-04T18:39:18.603 回答