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

Nếu bạn là lập trình viên thì hẳn bạn đã từng phải 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ể. Chức năng này giúp tương tác với website nhanh chóng và hiệu quả. Hãy cùng tìm hiểu cách lấy giá trị thẻ select trong JavaScript trong bài viết sau.

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.

lấy giá trị của thẻ select trong JavaScript
Thẻ Select là gì

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>

thẻ select là gì
Cách tạo và lấy giá trị của thẻ 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:

JavaScript
Cách lấy giá trị của thẻ select
  • 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.

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

branding
branding
February 05, 2021
0
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
JavaScript là gì? Giải thích chi tiết về JavaScript

JavaScript là gì? Giải thích chi tiết về JavaScript

JavaScript là gì? Đây là câu hỏi phổ biến mà các nhà tuyển dụng thường dùng khi phỏng vấn bạn về Frontend. Nếu  lĩnh vực lập trình Frontend, hãy chắc chắn rằng bạn thực sự hiểu rõ về JavaScript. Bài viết dưới đây sẽ cho bạn câu trả lời chính xác và cụ thể nhất […]
MEAN Stack là gì? Cấu trúc, ưu điểm của MEAN Stack

MEAN Stack là gì? Cấu trúc, ưu điểm của MEAN Stack

MEAN Stack là gì? Với những ai đã và đang làm việc với JavaScript thì chắc hẳn đã từng nghe đến khái niệm này. Bài viết dưới đây sẽ giới thiệu cho bạn về định nghĩa, cấu trúc và ưu điểm của giải pháp phát triển ứng dụng web này.  Mục lục1. MEAN Stack là […]
Các design pattern thông dụng trong JavaScript

Các design pattern thông dụng trong JavaScript

Các design pattern thông dụng không còn là công cụ xa lạ với giới lập trình viên. Nhờ có chúng, developer tạo được các mã code có thể bảo trì, khả dụng và dễ tái sử dụng, đặc biệt đối với các ứng dụng lớn. Bài viết dưới đây sẽ giúp bạn hiểu thêm về […]
Các cách lập trình hướng đối tượng trong JavaScript

Các cách lập trình hướng đối tượng trong JavaScript

Áp dụng lập trình hướng đối tượng trong JavaScript là việc không hề đơn giản, đặc biệt là với những ai mới bắt đầu tiếp cận với kỹ thuật này. Bài viết dưới đây giới thiệu về OOP và gợi ý cho bạn 4 thủ thuật để hiện thực các đặc tính của nó với […]
MVC framework là gì? Quy trình hoạt động của mô hình MVC

MVC framework là gì? Quy trình hoạt động của mô hình MVC

MVC framework đóng vai trò quan trọng trong việc thiết kế một chương trình cho máy tính, ứng dụng web hoặc thiết bị di động. Vậy, MVC framework là gì? Quy trình hoạt động của mô hình MVC ra sao? Cùng theo dõi bài viết sau đây của Got It để có câu trả lời […]
Function trong JavaScript: Những kiến thức cơ bản

Function trong JavaScript: Những kiến thức cơ bản

JavaScript là một ngôn ngữ lập trình phổ biến, được sử dụng rộng rãi cho trang web và máy chủ. Hãy cùng Got It tìm hiểu về function trong JavaScript ở bài viết này nhé.  Mục lục1. Function trong JavaScript là gì?2. Các yếu tố ảnh hưởng đến function3. Các tính chất của hàm trong […]