Arbeid med nedtrekkslister i JavaScript

I denne leksjonen vil vi studere arbeidet med taggen select, som representerer en nedtrekksliste. Hvis du ikke kan arbeide med denne taggen i HTML, så studer først dens oppbygning i referansen ved denne lenken: select.

La oss se på hvordan vi kan arbeide med denne taggen via JavaScript. La oss si at vi har en slik nedtrekksliste:

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

La oss få en referanse til select i en variabel:

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

La oss nå, ved endring av select, vise teksten til det valgte listepunktet på skjermen. For å gjøre dette må du lese egenskapen value til vår select:

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