Ändra det valda alternativet i en lista med JavaScript

I föregående lektion lärde vi oss hur man hämtar det valda alternativet i en lista. Låt oss nu ändra det valda alternativet med hjälp av JavaScript.

För att göra detta sätter vi värdet av select-elementets value-egenskap till värdet av det option-elements value-attribut som vi vill välja.

Låt oss säga att vi har följande select:

html<select id="select">
  <option value="one">ett</option>
  <option value="two" selected>två</option>
  <option value="three">tre</option>
</select>

Låt oss också säga att det finns en knapp:

html<input type="submit" id="button">

Låt oss hämta referenser till select och knappen i variabler:

javascriptlet select = document.querySelector('#select');
let button = document.querySelector('#button');

Och låt oss nu göra så att när knappen klickas ändrar vår select valt alternativ:

javascriptbutton.addEventListener('click', function() {
  select.value = 'one';
});