选择框全选/取消全选或选择一个选项限制多个选项

【问题标题】：Select box Select all / unselect all or select one option restricted multiple options选择框全选/取消全选或选择一个选项限制多个选项
【发布时间】：2021-02-22 06:52:36
【问题描述】：

我有一个选择框，我想通过单击选择所有选项，也可以通过单击取消选择所有选项，因此如果用户想选择另一个选项，那么只需选择一个选项而不是多个选项。我想在第一个选项单击时选择/取消选择所有选项`

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select>
  <option value="all">select all /unselect all</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

【问题讨论】：

你能提供代码吗？
我会说您需要将一个事件侦听器附加到此选择元素，然后根据值是“全部”还是单个值来处理函数中的行为

标签： javascript twitter-bootstrap bootstrap-4

【解决方案1】：

Select 通常只用于获取 ONE 值，也许您需要一个复选框或类似的东西......但谁知道:)

为了实现您想要的，您必须向 Select 添加一个事件侦听器，并尝试将“真实”值存储在变量中，也许这个示例对您有所帮助。

// html

<select id="mySelect">
  <option value="all">select all /unselect all</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

// js

var allValues = [];

function getAllValues(){
  return $('#mySelect option').toArray().map(({value}) => value)
}

function selectHandler(event) {
  const { target } = event;
  
  if (target && target.value == 'all') {
    allValues = getAllValues()
  } else {
    allValues = [target.value]
  }
  
  // Do something with this
  console.log(allValues)
}

$('#mySelect').on('change', selectHandler)

【讨论】：