Question

只需一个功能就可以将“Select2”加载到两个选项上。

Jquery的

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

现在我想为thoose选择添加占位符不知何故，我不能在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在同一功能中的多个占位符

2 个答案: