如何使用 select2 更改数据占位符？
到目前为止我已经尝试过了。
$("#city").select2({placeholder:"foo"});
还有这个...
$("#city").attr("data-placeholder","bar");
但是两者都不起作用。
我发现如果我只是设置属性，例如
$("#city").attr('data-placeholder', 'bar')$("#city").select2()例如
$("#city").attr("data-placeholder","bar");
$("#city").select2();
对于其他正在寻找属性解决方案以避免更改 JS 代码的人。我只需要自己查找一个项目，似乎 select2 只需要属性 data-placeholder="" 。
<select id="city" data-placeholder="my placeholder"></select>
在此处查看更多信息：select2 选项参考
您也可以在模板（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');
更多的是一种 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.");
更直接的方式..
$('#select2-' + $id + '-container').find('.select2-selection__placeholder').text('Your Text');
其中
$idid将其放入您的定位器使用的 html 中，如下所示：
<select id="city" placeholder="my placeholder"></select>
对于 select2 版本 4，我在 js 初始化代码中指定了占位符文本，然后使用
$select.select2{placeholder:"updated text..."}可以使用以下脚本：
$("#city").attr('placeholder', 'your text here' );
给出的几个答案存在潜在问题：
BillRobertson42 的 answer 可以工作，但它会删除之前在 select2 实例上设置的任何其他配置选项，wdonayredroid 的 answer
也是如此。dearsina的answer不需要重新初始化select2，因此不会删除任何现有的配置选项，但它仅适用于单个选择，不适用于多个选择。我在该答案中添加了一条关于如何使其适用于多个选择的评论，但即使在这种情况下，它也只能在第一次运行，并且重新调用该函数需要插入短暂的延迟。 ken-kin 的answer也是如此。
这些答案的另一个问题是它们依赖于特定的 HTML，这些 HTML 可能会被未来的 select2 更新破坏。
我之前必须想出一个解决方案来更新 select2 数据而不重建控件。该解决方案也可以在这里工作，但是我创建了一个更简单的解决方案，它允许您一般更新任意数量的配置选项，并且它适用于与给定选择器匹配的一个或所有 select2 实例。
第一个函数找到所有匹配的选择器，然后调用第二个函数。此功能保存现有和选定的数据选项以及现有配置。然后它清空、销毁并重建 select2 实例。最后，它重新选择已选择的所有数据选项。请看这里：
// override configuration options for all matching select2 instances
function select2UpdateConfig(selector, updatedConfigOptions = {}) {
// loop through all instances of the matching selector and update each instance
$(selector).each(function() {
select2InstanceUpdateConfig($(this), updatedConfigOptions);
});
}
// override configuration options for a single select2 instance
function select2InstanceUpdateConfig(instance, updatedConfigOptions = {}) {
// make sure this instance has select2 initialized
// @link https://select2.org/programmatic-control/methods#checking-if-the-plugin-is-initialized
if (!instance.hasClass('select2-hidden-accessible')) {
return;
}
// get the existing configuration options, and the select options that are currently selected
const existingConfigOptions = JSON.parse(JSON.stringify(instance.data('select2').options.options));
const existingSelected = instance.val();
// override configuration options with what was passed into the function
const options = Object.assign({}, existingConfigOptions, updatedConfigOptions);
// empty the select, destroy the existing select2 instance, then re-initialize
instance.empty().select2('destroy').select2(options);
// re-select any options that were selected
instance.val(existingSelected).trigger('change');
}
这些函数的好处是它们通常可以更新任何配置选项，而不仅仅是占位符。它们不需要破解 HTML。 Select2 侦听器在调用函数后应该仍然可以工作。唯一需要注意的是，这可能不会复制任何自定义适配器/回调。对于大多数用例，这些通用函数应该可以工作。