JavaScript: Jak pobrać zaznaczone opcje z listy?

Lista i wiele opcji

Mając listę rozwijaną 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 name="send" id="send">Send</button>

Potrzebujesz pobrać opcje zaznaczone przez użytkownika.

Jak to zrobić w JavaScript?

Obiekt HTMLSelectElement ma atrybut o nazwie: selectedOptions, który zwraca listę obiektów: HTMLOptionElement. Są to wszystkie zaznaczone opcje na liście.

select.selectedOptions

Wiedząc, że dane z selectedOptions to lista obiektów typu HTMLOptionElement, wystarczy iterować po każdym elemencie z tej listy i pobrać wartość z atrybutu value:

const selectedOptions = select.selectedOptions.map(option => option.value);

Hmm, nie! To nie przejdzie, ponieważ selectedOptions to obiekt.

Żeby wyłuskać te dane, można skorzystać z Array.from:

const select = document.getElementById('colour');
const sendBtn = document.getElementById('send');

sendBtn.addEventListener(
  "click",
  () => {
    const selectedOptions = Array.from(select.selectedOptions).map(option => option.value);
    console.log('selectedOptions: ', selectedOptions)
  },
  false,
);