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:
<select id="select">
<option>one</option>
<option selected>two</option>
<option>three</option>
</select>
Get a reference to the select into a variable:
let 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:
select.addEventListener('change', function(){
console.log(this.value);
});
Given a select, a paragraph, and a button. By clicking on the button, display the text of the selected list item in a paragraph.
Make a dropdown list of years from 2020
to 2030
. When you select any item in the
list, display a message about whether this year
is a leap year or not.