Werk met aftreklyste in JavaScript

In hierdie les sal ons die werk met die select-tag bestudeer, wat 'n aftreklys voorstel. As jy nie weet hoe om met hierdie tag in HTML te werk nie, bestudeer eers die struktuur daarvan in die handleiding by hierdie skakel: select.

Kom ons kyk hoe om met hierdie tag te werk deur JavaScript. Laat ons sê ons het die volgende aftreklys:

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

Laat ons 'n verwysing na die select kry in 'n veranderlike:

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

Kom ons nou, wanneer die select verander, die teks van die gekose lysitem na die skerm uitskryf. Om dit te doen, moet ons die value eienskap van ons select lees:

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