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

我认为这将是首选。