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

Posted 2023-05-07

【中文标题】如何将选择的所有选项设置为“所有”选项选项的值？

【英文标题】：How to set all options of a select as value for "All" options option?

【发布时间】：2019-09-05 15:53:25

【问题描述】：

我有一个应用程序使用 jquery select2 插件进行选择选项过滤器。是否有一个解决方案可以提供一个名为“All”的选项，它选择所有可用的选项值并将它们传递给选择的结果？就像将所有选项附加到数组或其他内容中的一个选项并将其显示为第一个选项一样。如何以及在哪里将它添加到 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 选择所有选项？任何建议表示赞赏！谢谢！

【问题讨论】：

JQuery Select2 - How to select all options的可能重复

另见How to select all options in select2 javascript multiselect。

感谢您的回复，但不是真的。我需要一个解决选项，它将在选项列表中的文本中提出所有选项，而是在选项值中具有逗号分隔的所有选项，以便选择“全部”时，过滤器返回所有可用选项的结果。跨度>

您能否进一步解释一下为什么需要这个？如果您想在后端使用此信息处理它，更容易的是只输入一些其他值，例如“all”或“-1”，然后在后端检查是否选择了该值以及是否选中, 用你需要的所有值替换它

【参考方案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>

【讨论】：

谢谢！我将尝试在我的实例上实现。

效果很好。问题是我使用 select2 插件，它删除了样式，并且当为 select 父元素启用 select2 时，All 选项不存在。也许我必须寻求其他方式。

找到另一个解决方案。检查响应是否 >=2 并且对于 select2 使用占位符和 allowClear:true。还附加了值属性设置为“”的选项。这样就有一个 X 来清除选中的选项，默认显示全部。

我不确定我是否理解，但我会在生成所有选项后初始化 select2。我还没有看到您的其余设置或最终代码，但听起来很有希望。

select2 在 $( document ).ready() 但感谢您的建议。我可以试试。是的，这就是为什么我希望所有值都用逗号分隔。但在我的情况下，空值也会返回所有结果。我刚注意到。也许是因为我做的查询。如果遇到困难，我会对其进行更多测试并告知。该实例在此处重现非常复杂。再次感谢您！