jQuery Select2 占位符在定义内联时不起作用？

Question

我使用 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 选项列表（上面已注释掉）中定义占位符时才有效，但我想使用单个 class 来初始化所有 select2 多选下拉菜单并显示不同的占位符。

有可能实现吗？

Answer 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/

我认为这是首选。

Answer 2

您可以为每个 select

使用不同的占位符 data-placeholder

$('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。

Answer 3

它将作为：

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

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

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

Answer 4

也许您的网页上有类似的 id。 JS 会默认 select latest id。尝试改变它们。

jQuery Select2 占位符在定义内联时不起作用？

jQuery Select2 placeholder doesn't work when defined inline?

javascript

jquery

select2