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
}

这似乎很基本，但我很难过。

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

4

8 回答 8

13

更新

如果您通过 HTMLdata-placeholder属性设置了占位符，则需要更改它而不是内部选项，因此它看起来像Fabian 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 要好得多。

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

希望有帮助！

于 2014-05-07T19:05:48.390 回答
7

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

<select id="myFoo">

在 jQuery 上设置它

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

然后像这样更新它

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

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

于 2016-06-21T06:38:50.807 回答
4

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

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

归功于Brocks 的回应。

于 2014-09-20T19:29:13.827 回答
3

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

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

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

于 2013-07-02T20:48:52.990 回答
3

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

我想出了一个新的解决方案，即使它是一个黑客。我存储了 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');
于 2017-11-10T18:48:19.033 回答
1

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

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

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

于 2020-10-08T08:38:12.550 回答
0

我相信行为将取决于您使用的 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 });

这似乎现在每次都有效。

于 2016-07-24T16:07:01.793 回答
0

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

response.unshift({id: '', text: ''});
$('#elem).select2({placeholder: 'Select..', data: response});
于 2018-05-01T18:25:00.510 回答