内联定义时，jQuery Select2 占位符不起作用？答案

【问题标题】：jQuery Select2 placeholder doesn't work when defined inline?内联定义时，jQuery Select2 占位符不起作用？
【发布时间】：2017-11-30 21:06:16
【问题描述】：

我使用 select2 定义了以下多个下拉列表，但占位符不起作用？

<select class="js-select2" multiple="multiple" placeholder="Select State">
     <option value="AK">Alaska</option>
     <option value="HI">Hawaii</option>
</select>

<select class="js-select2" multiple="multiple" placeholder="Select Fruits">
     <option value="Apples">Apples</option>
     <option value="Oranges">Oranges</option>
</select>

<script>
    $(".js-select2").select2({
      // placeholder: 'Select an option...'
   });

</script>

仅当我在 select2 选项列表中定义占位符（上面已注释掉）时才有效，但我想使用单个类来初始化所有 select2 多选下拉菜单并显示不同的占位符。

有可能实现吗？

【问题讨论】：

如果您在零索引处没有空的<option>，您上面的注释行将不起作用。
@Afnan 它确实有效，因为它是多选。

标签： javascript jquery select2

【解决方案1】：

为了快速解决方法，您可以将属性的值传递给占位符选项：

 $(".js-select2").each(function() {
    $(this).select2({
       placeholder: $(this).attr('placeholder')
   });
 });

这在直接使用$(".js-select2").select2() 时不起作用，我假设在那种情况下this 没有指向正确的对象（或类似的东西）。但是如果你使用each 循环在每个元素上分别初始化它，它就可以工作。

https://jsfiddle.net/84whaced/

或者，如果您在 HTML 中使用 data-placeholder，它应该可以工作（令人惊讶的是，一旦我们检查了文档，我们就会发现，对吧？），请参阅 https://select2.github.io/options.html#data-attributes - https://jsfiddle.net/84whaced/1/

我认为这将是首选。

【讨论】：

【解决方案2】：

它将作为：

如果我们只是设置 attr 例如$("#state").attr('data-placeholder', 'Select State')，不会有效果。

但是，如果我们设置 attr，然后不带参数调用 $("#state").select2()，则占位符会更新。

$("#state").attr("data-placeholder","Select State");
$("#state").select2();

【讨论】：

【解决方案3】：

您可以将data-placeholder 用于每个select 的不同占位符

$('select').select2({
    placeholder: function(){
        $(this).data('placeholder');
    }
});

<select class="js-select2" multiple="multiple"  data-placeholder="Select State">
     <option value="AK">Alaska</option>
     <option value="HI">Hawaii</option>
</select>

<select class="js-select2" multiple="multiple"  data-placeholder="Select Fruits">
     <option value="Apples">Apples</option>
     <option value="Oranges">Oranges</option>
</select>

您也可以查看Demo。

【讨论】：

感谢您的解决方案，但根据 CBroe 解决方案，如果使用数据破折号属性，则在初始化时无需包含占位符选项。
好主意，谢谢

【解决方案4】：

也许您的网页上有类似的ids。 JS 会默认选择最新的 id。尝试改变它们。

【讨论】：

adam78 正在通过 css-classes 处理元素。