JavaScript-те выпадающі тізімдермен жұмыс

Бұл сабақта біз select тегімен жұмыс істеуді үйренеміз, ол выпадающі тізімді білдіреді. Егер сіз бұл тегпен HTML-де жұмыс істей білмесеңіз, алдымен оның құрылымын осы сілтеме бойынша анықтамалықтан оқып шығыңыз: select.

Енді осы тегпен JavaScript арқылы қалай жұмыс істеуге болатынын қарастырайық. Бізде мынадай выпадающі тізім бар делік:

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

Селектке сілтемені айнымалыға алайық:

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

Енді селект өзгерген кезде тізімнің таңдалған пунктінің мәнін экранға шығарайық. Ол үшін біз селектіміздің value қасиетін оқуымыз керек:

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