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:

html<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:

javascriptlet 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:

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