如果选择了item-all，请选择所有选项

Question

我有这样的事情：

<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>

我需要什么：

1. 在初始化之后，只选择（完成）“全部”。
2. 如果客户选择了其他选项，则应取消选择“所有项目”。
3. 如果客户选择了e.q 2选项，之后将选择“all-item”，则应选择第一个选项，另一个选项应取消选择。

我试着这样做：

$("#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>

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

Answer 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>

Answer 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>