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);
});