Question

我想在事件上更改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
}

这看起来很基本，但我很难过。

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

Answer 1

<强>更新

如果您通过HTML data-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更好。

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

希望有所帮助！

Answer 2

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

<select id="myFoo">

在jQuery上设置

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

然后像这样更新

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

它适用于我，希望它有所帮助。

Answer 3

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

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

致Brocks response的信用。

Answer 4

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

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

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

Answer 5

我正在使用Select2 4.0.5标准，现有的解决方案对我不起作用，或者需要为每个占位符更新重新创建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');

Answer 6

在最新版本的Select2（4.0.13）中，使用多选作为占位符的这些选项对我都不起作用，的确是搜索输入。终于成功了：

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

使用该函数，我可以更新调用函数setSelect2Placeholder

的select的占位符

Answer 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 });

现在似乎每次都有效。

Answer 8

如果您还要动态修改选项，则需要为占位符的其他空选项添加队列才能生效。例如：

cin

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

8 个答案: