Arbeit mit Dropdown-Listen in JavaScript

In dieser Lektion werden wir die Arbeit mit dem Tag select untersuchen, der eine Dropdown-Liste darstellt. Wenn Sie nicht mit diesem Tag in HTML arbeiten können, dann lernen Sie zunächst seine Struktur im Handbuch unter diesem Link: select.

Lassen Sie uns sehen, wie man mit diesem Tag über JavaScript arbeitet. Nehmen wir an, wir haben eine solche Dropdown-Liste:

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

Holen wir uns einen Verweis auf die Selectbox in eine Variable:

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

Lassen Sie uns nun bei einer Änderung der Selectbox den Text des ausgewählten Listenpunkts ausgeben. Dazu muss die Eigenschaft value unserer Selectbox ausgelesen werden:

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