如何将 select 的所有选项设置为 "All" options 选项的值?

How to set all options of a select as value for "All" options option?

我有一个应用程序使用 jquery select2 插件作为 select-option 过滤器。是否有一个解决方案可以让一个名为 "All" 的选项成为 select 所有可用的选项值并将它们传递给 select 的结果?就像将所有选项附加到数组或其他内容中的一个选项并将其显示为第一个选项。如何以及在何处将其添加到 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 实例不使用多选 select。据我所知,要显示所有选项,我需要在选项标签的值属性中用逗号分隔所有值。

例如,select一个国家有一个选项。有些结果适用于所有国家。我如何使用 select2 select 所有选项?任何建议表示赞赏!谢谢!

这是一个如何做到的例子:

  1. 获取 <select> 中的所有值,以逗号分隔。
  2. <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>