Làm việc với danh sách thả xuống trong JavaScript

Trong bài học này, chúng ta sẽ nghiên cứu cách làm việc với thẻ select, đại diện cho một danh sách thả xuống. Nếu bạn chưa biết cách làm việc với thẻ này trong HTML, trước tiên hãy tìm hiểu cấu trúc của nó trong hướng dẫn theo liên kết này: select.

Hãy xem cách làm việc với thẻ này thông qua JavaScript. Giả sử chúng ta có một danh sách thả xuống như sau:

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

Lấy một tham chiếu đến phần tử select vào một biến:

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

Bây giờ, hãy thử khi thay đổi lựa chọn trong select, chúng ta sẽ in ra console văn bản của mục được chọn. Để làm điều này, cần đọc thuộc tính value của phần tử select của chúng ta:

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

Cho một phần tử select, một đoạn văn và một nút bấm. Khi nhấp vào nút, hãy hiển thị văn bản của mục được chọn trong danh sách vào đoạn văn.

Tạo một danh sách thả xuống chứa các năm từ 2020 đến 2030. Khi chọn một mục bất kỳ trong danh sách, hãy hiển thị thông báo cho biết năm đó có phải là năm nhuận hay không.