Cách lấy giá trị của thẻ select trong JavaScript cho người mới

Bạn có định hướng phát triển thành lập trình viên ngôn ngữ JavaScript? Nếu có thì bạn hẳn bạn sẽ phải học lấy giá trị của thẻ select trong JavaScript.

Thẻ select sẽ tạo ra drop-down list giúp người dùng lựa chọn một thông tin cụ thể. Bởi vậy, chức năng này sẽ giúp bạn tương tác với website nhanh chóng và hiệu quả hơn. Hãy cùng Got It tìm hiểu cách lấy giá trị thẻ select trong JavaScript trong bài viết hôm nay nhé!.

1. Thẻ select trong HTML là gì?

Thẻ select là một thẻ thường được sử dụng trong HTML. Các thẻ select là thành phần cấu tạo nên form giúp thu thập thông tin từ người dùng. Bên trong các thẻ select là các thẻ option, nơi các lập trình viên tạo ra các lựa chọn. Khi hiển thị lên website, các thẻ select này chính là các dropdown list. Mỗi khi người dùng click vào drop-down list, một loạt các lựa chọn sẽ đổ xuống, người dùng sau đó sẽ chọn 1 trong các lựa chọn này.

Một ví dụ điển hình về thẻ select là lựa chọn độ tuổi. Người dùng chỉ cần click vào down down list được tạo nên từ thẻ select là có thể chọn tuổi. Tính năng này giúp người dùng không phải mất công nhập thủ công tuổi của mình. Sau khi người dùng lựa chọn 1 option, các lập trình viên sẽ cần phải lấy giá trị của thẻ select trong JavaScript. Mục đích của việc này là để phục vụ tính toán hay lưu trữ thông tin.

2. Cách tạo thẻ select đơn giản trong HTML

Trước khi học cách lấy giá trị thẻ select trong JavaScript, bạn phải biết cách tạo thẻ select. Để tạo thẻ select trong HTML, bạn hãy dùng đoạn code sau:

<select id=”Mã_id_của_thẻ_select”> 
<option value=”1” selected=”selected”>Lựa chọn 1</option>
<option value=”2”>Lựa chọn 2</option>
<option value=”3”>Lựa chọn 3</option>
</select>

Trong đó, cặp thẻ <select></select> sẽ dùng để bọc các option và định dạng drop down list. Các thẻ <option</option> ở trong là các lựa chọn mà người dùng có thể chọn. Thuộc tính id giúp lập trình viên xác định được thẻ select để sau này thao tác với thẻ này. Thuộc tính value là giá trị trả về khi lấy giá trị thẻ select trong JavaScript. Tùy thuộc vào mục đích của mỗi dự án mà bạn có thể đặt value khác nhau. Thuộc tính selected sẽ quy định lựa chọn mặc định được chọn ban đầu.

3. Hướng dẫn cách lấy giá trị của thẻ select trong JavaScript cho người mới

Bạn có thể lấy giá trị của thẻ select bằng nhiều cách khác nhau. Tuy nhiên, cách phổ biến nhất là dùng getElementById và hàm value. Bạn hãy dùng đoạn code dưới đây:

• document.getElementById(“Mã_id_của_thẻ_select”).value;

Đoạn code trên sẽ trả về giá trị value của option mà người dùng chọn trong thẻ select. Ví dụ người dùng chọn “Lựa chọn 1”, đoạn code trên sẽ trả về giá trị là “1”. Nếu bạn muốn giá trị trả về là “Lựa chọn 1”, hãy dùng đoạn code sau:

Let e = document.getElementById(“Mã_id_của_thẻ_select”);
Let giaTri = e.options[e.selectedIndex].text;

Khi đó, giaTri sẽ trả về kết quả “Lựa chọn 1”.

Với những cách trên bạn đã có thể lấy giá trị của thẻ select khi muốn xuất dữ liệu trong JavaScript. Thẻ select là một trong những thẻ quan trọng của HTML. Đây là thành phần cấu tạo nên form giúp người dùng tương tác với website. Biết cách lấy giá trị của thẻ select trong JavaScript sẽ giúp ích rất nhiều cho lập trình viên.

Hiện tại, Got It đang tuyển dụng các vị trí Software Engineer sử dụng JavaScript. Bạn có thể tham khảo tại đây hoặc subscribe chúng mình để không bỏ lỡ những tin tức mới nhất nhé!