如果选择了 item-all，则选择所有选项答案

【问题标题】：Select all option if item-all was selected如果选择了 item-all，则选择所有选项
【发布时间】：2018-06-26 10:35:25
【问题描述】：

我有这样的事情：

<select multiple>
  <option value="all-item" selected>All</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

我需要什么：

初始化后，仅选择“全部”（完成）。
如果客户选择了其他选项，则应取消选择“所有项目”。
如果客户选择了 e.q 2 选项，然后选择“所有项目”，则应仅选择第一个选项，而应取消选择另一个选项。

我试着这样做：

$("#all-item").on('focus', function() {
    $("#selecty option").each(function(){
       $(this).attr("selected", "selected");
    });
});

<select multiple>
  <option value="all-item" selected>All</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

但不起作用。有人可以帮忙吗？

【问题讨论】：

选择多个选项因操作系统和浏览器而异。由于执行此操作的方式不同，并且由于您必须通知用户可以进行多选，因此使用复选框对用户更友好。见here

标签： javascript jquery css html

【解决方案1】：

当用户选择任何东西时，您可以简单地检查all-item 是否被.is(':selected') 选择，并使用.attr('selected',false) 取消选择其他任何东西：

$('select').on('change',function(){
  if($('option[value="all-item"]',this).is(':selected')){
    $('option:not([value="all-item"])',this).attr('selected',false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple>
  <option value="all-item" selected>All</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

【讨论】：

@trichetriche 对于 windows：按住 control (ctrl) 按钮可选择多个选项；对于 Mac：按住命令按钮可选择多个选项
:D 谢谢@CodeIt，点击“全部”不起作用。没有选择多个值。
@trichetriche 它不应该。据我了解，all-items 是他选择的有效值。
那么正如我回答你的那样，在这种情况下，无需提问，只需像任何选项一样返回all-item 值。
@trichetriche 问题是当all-items 被选中时如何取消选择其他任何东西。

【解决方案2】：

我用 vanilla JS 做的，因为你不需要 JQuery ：

function handleChange(element) {
  if(element.value === 'all-item') {
    const options = [...element.options];
    for (let opt of options) {
      if (opt.value !== '' && opt.value != 'all-item') { opt.selected = true; } 
      else { opt.selected = false; }
    }
  }
}

option {
  padding: 12px;
}

<select id="select" multiple onchange="handleChange(this)">
  <option value="">Chose an option</option>
  <option value="all-item">All</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

编辑

取消选择所有其他选项：

function handleChange(element) {
  if(element.value === 'all-item') {
    const options = [...element.options];
    for (let opt of options) {
      if (opt.value === 'all-item') { opt.selected = true; } 
      else { opt.selected = false; }
    }
  }
}

option {
  padding: 12px;
}

<select id="select" multiple onchange="handleChange(this)">
  <option value="">Chose an option</option>
  <option value="all-item">All</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

【讨论】：

我很确定 OP 希望值 all-items 成为他选择的可能结果。不是选择所有内容的方法。
那他就不用问了，他只需要像一个选项一样返回all-item。