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选项列表中定义占位符（上面已注释掉）时它才有效但我想使用单个类来初始化所有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

您可以将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。

Answer 3

它将起作用：

如果我们只设置attr，例如pip install ibm_db_sa，没有效果。

但是，如果我们设置attr然后在没有参数的情况下调用$("#state").attr('data-placeholder', 'Select State')，那么占位符会更新。

$("#state").select2()

Answer 4

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

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

4 个答案: