Cách lấy giá trị Dropdown với JavaScript

Khi học xây dựng web form, một nhiệm vụ phổ biến nhất là lấy giá trị từ dropdown (menu thả xuống). Bài này học cách lấy giá trị đó với JavaScript.

Element HTML Dropdown

Nhắc nhanh cách xây dropdown với HTML. Theo dõi Codepen nếu bị lạc.

Để xây dropdown, dùng thẻ select và các con option lồng bên dưới. Select tạo dropdown, option định nghĩa các lựa chọn bên trong.

Tạo dropdown trái cây yêu thích (có emoji).

<select name="fruits" id="fruits"> 
  <option value="">--select--</option> 
  <option value="avocado">Avocado🥑</option> 
  <option value="watermelon">Watermelon🍉</option> 
  <option value="kiwi">Kiwi🥝</option> 
  <option value="tomato">Tomato🍅</option> 
</select> 
<h2 id="pick"></h2>

Thêm h2 rỗng sẽ điền bằng JS sau. Lúc này chọn trái cây:

Chú ý tầm quan trọng của thuộc tính value. Thuộc tính này cho dữ liệu không styled (raw) dễ chơi với JS. Text bên trong option tag có thể bất cứ gì, nên không tin cậy. value property là quan trọng.

Chọn và hiển thị giá trị Dropdown với JavaScript

Trước hết chọn fruits dropdown bằng getElementById trên thẻ select.

const element = document.getElementById("fruits");

Giờ dropdown đã chọn, lấy giá trị option hiện tại. Mặc định là option đầu. Thử:

const checkValue = element.options[element.selectedIndex].value; 
const checkText = element.options[element.selectedIndex].text;

Truy cập mảng options của element. Chọn index của option đang chọn, lấy value hoặc text.

Thử console.log cả hai biến. Kết quả? Nothing. Tại sao? Vì option đầu có value rỗng (placeholder). Comment option đầu và thử lại. Yay! Lấy được value và text bằng JS.

Lắng nghe thay đổi Dropdown với JavaScript

Làm dropdown dynamic vì JS thiết kế react cho thay đổi trang. Gán eventListener cho element fruit.

element.addEventListener("change", (e) => { 
  const value = e.target.value; 
  const text = element.options[element.selectedIndex].text; 
  if (value) { 
    document.getElementById("pick").textContent = `Value Selected: ${value}`; 
  } else { 
    document.getElementById("pick").textContent = ""; 
  } 
});

Với eventListener lắng nghe "change" trên dropdown. Chú ý cũng lấy value option đã chọn bằng e.target.value, bạn đã thấy trong tutorial form khác.

Đã xong. Bây giờ chọn bất kỳ option trái cây, JS phản ứng thay đổi dropdown và cập nhật h2. Rất fruitful!

Kết luận

Lấy giá trị dropdown là kỹ năng quan trọng khi học web dev. Giá trị lấy được quan trọng nếu muốn update database, show lựa chọn cho user hoặc 'react' thay đổi DOM. Với JavaScript lấy giá trị đó ngay lập tức.