Vanilla JavaScript-如何檢查多個選擇選項中的一個選項？

Question

要檢查是否選中了一個復選框 ，我們可以這樣做：

let isChecked = event.target.checked

下面的多個選擇選項呢？

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

我們如何檢查是否選擇了A或選擇B時未選擇A？

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>