select2：以编程方式控制占位符

Posted 2023-03-05

【中文标题】select2：以编程方式控制占位符

【英文标题】：select2: programmatically controlling placeholder

【发布时间】：2013-05-29 22:17:12

【问题描述】：

我想更改 select2 上的占位符，以增强对事件的控制。

所以我有这个...

<select id="myFoo" placeholder="Fight some foo...">

...然后增强：

init: function()
   $('#myFoo').select2();
,

...所以现在它有了正确的占位符。

但是我希望它对事件做出反应并清除占位符...

someButtonPress: function()
//   $('#myFoo').placeholder("");
//   $('#myFoo').attr('placeholder', "");
//   $('#myFoo').select2('placeholder',"");
//   $('#myFoo').select2(placeholder:"");
//   none of these work

这看起来很简单，但我很难过。

我在文档中找不到任何内容。我找错地方了吗？

【问题讨论】：

你有没有试过从你的html中删除占位符并用$('#myFoo').select2('placeholder',"Fight some foo...")'设置它，然后你也许可以用相同的函数清除它

嗯，这会将我的文本放入 javascript，而不是 HTML...

这就是我最终搞定它的方式： $('#myFoo').parents('td').find('a.select2-default span').html(''); :P

我已经为此提交了一张票：github.com/ivaynberg/select2/issues/2807

【参考方案1】：

更新

如果您通过 HTML data-placeholder 属性设置了占位符，则需要更改它而不是内部选项，因此它看起来像 F*** H. 建议的那样：

$select.attr("data-placeholder", "New placeholder text");
$select.data("select2").setPlaceholder();

如果没有，请使用内部选项select2.opts.placeholder：

var select2 = $select.data("select2");
select2.opts.placeholder = "New placeholder text";
select2.setPlaceholder();

这当然不是完美的，但比破解 select2 生成的 HTML 要好得多。

this.$select.data("select2") 为您获取内部 select2 对象，因此您可以访问其属性和方法（不仅限于那些从外部导出以供使用的） 接下来我将更新placeholder 内部选项或更改相关数据属性 最后我触发了设置新占位符的内部方法setPlaceholder。

希望有帮助！

【讨论】：

对于内部选项更新方法，虽然发布的答案大概适用于单选控件，但它不适用于我的多选控件（至少对于 Select2 3.3.x）。要为多选版本执行此操作，我最终需要调用 select2.clearSearch() 而不是 select2.setPlaceholder()。

【参考方案2】：

如果要动态更改占位符，请不要在 HTML 上设置

<select id="myFoo">

在 jQuery 上设置它

$('#myFoo').select2(
   placeholder: "your placeholder"
);

然后像这样更新它

someButtonPress: function()
$('#myFoo').select2(
    placeholder: "change your placeholder"
  );

对我有用，希望对你有帮助。

【讨论】：

有效，但是这种方法的问题是你必须重新指定所有的属性（例如：标签等）

【参考方案3】：

要使用远程数据 (AJAX/JSONP) 更新 Select2 的占位符，请使用以下代码：

$input = $("input#e7");
$input.attr("data-placeholder", "New placeholder");
var select2 = $input.data("select2");
select2.setPlaceholder();

感谢Brocks response。

【讨论】：

原来我的选项调整不适用于 html 指定的占位符，感谢您的输入。

【参考方案4】：

另一种更新占位符的方法是在select元素上设置“placeholder”属性，然后再次调用select2()：

$('#IdForSelectElement').attr('placeholder', 'New Placeholder Text').select2();

请记住，如果您第一次将任何选项传递给 select2，则需要再次传递它们（或者只需使用 $.fn.select2.defaults 设置默认选项）。

【参考方案5】：

我使用的是 Select2 4.0.5 Standard，现有的解决方案要么对我不起作用，要么需要为每个占位符更新重新创建 select2，这是我想避免的。

我想出了一个新的解决方案，即使它是一个 hack。我存储了 select2 容器以便以后轻松访问它，然后当我需要更新占位符时，我会在容器中找到占位符元素并更新其文本：

var selectorSelect2 = $('#selector').data('select2').$container;
...
selectorSelect2.find('.select2-selection__placeholder').text('Updated Text 1');
...
selectorSelect2.find('.select2-selection__placeholder').text('Updated Text 2');

【参考方案6】：

在具有多重选择作为占位符的最新版本的 Select2 (4.0.13) 中，这些选项都不适用于我确实是搜索输入。这终于奏效了：

$.fn.setSelect2Placeholder = function (placeholder) 
    $(this).data('select2').selection.placeholder.text = placeholder;
    $(this).trigger("change");
;

使用该函数，我可以更新调用函数 setSelect2Placeholder 的 select 的占位符

【参考方案7】：

我相信该行为将取决于您使用的 Select2 版本（我们使用的是 v3.5.1），但我必须采取稍微不同的方法来让占位符按需更改。在我的例子中，选择器会根据另一个选择器的值更改呈现的选项，这意味着占位符需要随着新的数据集而改变。

为了让它工作，我必须删除对 HTML 输入元素中占位符的所有引用。

<input type="text" class="form-control span10">

然后，在 Javascript 中，每当我使用正确的选项加载元素时，我都必须通过 data() 函数更新占位符：

selector.data('placeholder', placeholder);
selector.select2( data: new_data_set, tags: true );

这似乎每次都有效。

【参考方案8】：

如果您还要动态修改选项，则需要将一个额外的空选项排入队列以使占位符生效。例如：

response.unshift(id: '', text: '');
$('#elem).select2(placeholder: 'Select..', data: response);