javascript - 如果选择了 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").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

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