Working with dropdown lists in JavaScript

In this lesson, we will learn how to work with the select tag, which is a dropdown list. If you don't know how to work with this tag in HTML, then first study this tag in the manual at this link: select.

Let's see how to work with this tag through JavaScript. Let's say we have a dropdown list like this:

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

Get a reference to the select into a variable:

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

Let's now display the text of the selected list item when changing the select. To do this, we need to read the value property of our select:

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