Arbete med rullgardinsmenyer i JavaScript

I den här lektionen kommer vi att studera arbete med taggen select, som representerar en rullgardinsmeny. Om du inte kan arbeta med denna tagg i HTML, studera först dess uppbyggnad i referensboken via denna länk: select.

Låt oss se hur man arbetar med denna tagg via JavaScript. Låt oss säga att vi har följande rullgardinsmeny:

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

Låt oss få en referens till select-elementet i en variabel:

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

Låt oss nu när select-elementet ändras skriva ut texten för det valda listalternativet. För att göra detta behöver du läsa egenskapen value för vårt select-element:

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