同一功能中两个 Select2 的多个占位符答案

【问题标题】：Multiple placeholders for two Select2´s in same function同一功能中两个 Select2 的多个占位符
【发布时间】：2016-03-13 10:39:17
【问题描述】：

可以通过一个函数将“Select2”加载到两个选择中。

jQuery

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

现在我想为这些选择添加占位符。
不知何故，我无法在 HTML 中做到这一点。

jQuery

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

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

【问题讨论】：

标签： javascript jquery jquery-select2 placeholder

【解决方案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
  });
});

希望它对你有用。

【讨论】：

【解决方案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>

【讨论】：