Question

我有一个将jquery select2插件用于选择选项过滤器的应用程序。是否有一个名为“全部”的选项的解决方案，该选项会选择所有可用的选项值并将它们传递给选择结果？就像将所有选项附加到数组或某个内容中的一个选项并将其显示为第一个选项一样。如何以及在何处将其添加到select2（）函数上？我对这样的解决方案感兴趣，该解决方案将优先于所有这样的选项：

<option value="LIST OF ALL OPTIONS SEPARATED BY COMMA HERE">All</option>

所以我可以得到如下结果：

<option value="US,UK,DE...">All</option> // like this but not sure how to grab all the values and prepend this here.
<option value="US">United States</option>
<option value="UK">United Kingdom</option>
<option value="DE">Germany</option>
...

我一直在搜索，找不到我需要的东西。我的select2实例不使用多个选择。据我了解，要显示所有选项，我需要在选项标签的value属性中用逗号分隔所有值。

例如，有一个选择国家的选项。一些结果适用于所有国家。如何使用select2选择所有选项？任何建议表示赞赏！谢谢！

Answer 1

以下是如何操作的示例：

从<select>获取所有值，以逗号分隔。
在<option>前面加上新值“ ALL”。

$('.makeAll').each(function() {

  $select = $(this);

  var values = $('option', $select).map(function() {
    return this.value;
  }).toArray().join(',');

  $('<option>', {
    'value': values,
    'text': 'ALL'
  }).prependTo($select);

});

// For demo; output the selected value.
$('select').on('change', function() {
  console.log(this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="makeAll">
  <option value="US">United States</option>
  <option value="UK">United Kingdom</option>
  <option value="DE">Germany</option>
</select>

<select class="makeAll">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

编辑

请注意，带逗号的值将被视为多个值，因为定界符相同。例如：

<option value="1,2,3,4">

我为定界符使用了一个变量，因此可以根据需要轻松地对其进行更改：

var delim = '#';

$('.makeAll').each(function() {

  var $select = $(this);

  var values = $('option', $select).map(function() {
    return this.value;
  }).toArray().join(delim);

  $('<option>', {
    'value': values,
    'text': 'ALL'
  }).prependTo($select);

});

// For demo; output the selected value(s).
$('select').on('change', function() {
  console.log(this.value.split(delim));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="makeAll">
  <option value="1,2,3,4">Sample</option>
  <option value="spin">Funnel</option>
  <option value="4,22(n,s)">Igloo</option>
</select>

<select class="makeAll">
  <option value="1-2-3-4">Result</option>
  <option value="spin;watch">Crystal</option>
  <option value="4,22(n-s)">Curtain</option>
</select>

如何将选择的所有选项设置为“所有”选项的值？

1 个答案:

编辑