Arbejde med dropdown-lister i JavaScript

I denne lektion vil vi studere arbejdet med tagget select, som repræsenterer en dropdown-liste. Hvis du ikke kan arbejde med dette tag i HTML, så studer først dens opbygning i referencebogen via dette link: select.

Lad os se på, hvordan man arbejder med dette tag via JavaScript. Lad os sige, at vi har fået en sådan dropdown-liste:

html<select id="select">
  <option>one</option>
  <option selected>two</option>
  <option>three</option>
</select>

Lad os få en reference til select i en variabel:

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

Lad os nu udskrive teksten fra den valgte listepunkt på skærmen, når select ændres. For at gøre dette skal du læse egenskaben value for vores select:

javascriptselect.addEventListener('change', function(){
  console.log(this.value);
});