JavaScript: Jak zresetować listę?

Odznaczanie opcji z listy

Przykładowa lista wielokrotnego wyboru:

<label for="colour">What is your favourite colour?</label>
<br />
<select id="colour" name="colour" multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="other">Other</option>
</select>
<br />
<button id="reset">Reset</button>

Jak zresetować listę do stanu początkowego po kliknięciu przycisku Reset?

Element: HTMLSelectElement posiada atrybut o nazwie: selectedIndex. Przechowuje indeks, który mówi, który element z listy jest zaznaczony (indeks jest liczony od 0).

Czyli jeśli posiada wartość 0 to znaczy, że pierwszy element z listy jest zaznaczony. Jeśli lista nie zawiera zaznaczonych elementów, to selectedIndex będzie mieć wartość: -1.

Żeby zresetować listę, wystarczy przypisać do selectedIndex wartość: -1:

const select = document.getElementById("colour");
const resetBtn = document.getElementById("reset");

resetBtn.addEventListener("click", () => {
  select.selectedIndex = -1;
});