同一函数中两个 Select2 的多个占位符

Question

只需一个函数就可以将 "Select2" 加载到两个选择上。

Jquery

$('.selector1, .selector2').select2();

现在我想为选择添加占位符。
不知何故，我无法在 HTML.

中做到这一点

Jquery

$('.selector1, .selector2').select2({
  placeholder: 'selector1',
  placeholder: 'selector2'
);

代码应该是什么样的？
有可能吗？

Answer 1

尝试 FIDDLE,

您可以使用数据属性来获取所需的行为，要获取类似 data-placeholder 的数据属性，您可以使用 .data()，如下所示

<select multiple class='selector1' id="e1" style="width:300px" data-placeholder="select a state">
  <option value="AL">Alabama</option>
  <option value="Am">Amalapuram</option>
  <option value="An">Anakapalli</option>
  <option value="Ak">Akkayapalem</option>
  <option value="WY">Wyoming</option>
</select>

<select multiple class='selector2' id="e2" style="width:300px" data-placeholder="select a city">
  <option value="AL">Alabama</option>
  <option value="Am">Amalapuram</option>
  <option value="An">Anakapalli</option>
  <option value="Ak">Akkayapalem</option>
  <option value="WY">Wyoming</option>
</select>

Javascript :

$(".selector1, .selector2").each(function() {
  var placeholder = $(this).data('placeholder'); // this will get the placeholder from the control
  $(this).select2({
    placeholder: placeholder,
    allowClear: true
  });
});

希望对你有用。

Answer 2

你可以使用data-placeholder属性，Select2会在你初始化的时候自动拾取。这是因为 Select2 supports data attributes 用于声明配置。

$("select").select2();

body { margin: 0; }

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.js"></script>

<select data-placeholder="First placeholder">
  <option></option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<select data-placeholder="Second placeholder">
  <option></option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

同一函数中两个 Select2 的多个占位符

Multiple placeholders for two Select2´s in same function

javascript

jquery

jquery-select2

placeholder