Vanilla JavaScript - 如何检查一个选项在多个 select 选项中被 select 编辑？

Question

要检查 复选框 是否被勾选，我们这样做：

let isChecked = event.target.checked

像下面这样的多个select选项怎么样？

<select name="books[]" multiple>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

当你 select B 时，我们如何检查 A 是否 selected 或 A 何时未selected？

Answer 1

由于多选元素处理值的方式，只需检查新值即可。如果是A，那么第一个选中的元素就是A.

document.getElementById("books").addEventListener("change", function(e) {
  console.log(this.value == "A");
});

<select name="books[]" id="books" multiple>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

Answer 2

您可以查看所选选项的长度：

document.querySelector('select').addEventListener('change', function(){
  console.clear();
  let sel = this;
  let checked = [...sel.options].filter(option => option.selected).map(o => o.value);
  let isA = checked.includes('A') ? 'A selected' : 'A not selected';
  let isChecked = checked.length > 0 ? 'Selected' : 'None selected';
  console.log(isA);
  console.log(isChecked);
});

<select name="books[]" multiple>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

Vanilla JavaScript - 如何检查一个选项在多个 select 选项中被 select 编辑？

Vanilla JavaScript - How to check a option is selected in multiple select options?

html

javascript

html-select

multiple-select

dom-events