Tìm hiểu về cách lấy giá trị của thẻ select trong javascript thông qua ví dụ cụ thể: tạo một form đơn giản, yêu cầu thực hiện lấy giá trị từ input chuỗi ngăn cách bởi dấu phảy rồi thêm vào select và hiển thị giá trị vừa chọn lên thông báo.
1. Bài toán
Hãy thiết kế giao diện đơn giản như sau:
Thực hiện các yêu cầu sau (mã lệnh được viết bằng JavaScript):
1. Khi nhấn nút “Thực hiện”, nội dung trong textbox txtChuoi sẽ được phân tách thành mảng và nạp
danh sách vào điều khiển ddlDanhsach. Nếu txtChuoi trống thì hiển thị thông báo yêu cầu nhập nội dung, đồng thời đặt con trỏ vào điều khiển này.
2. Khi chọn một mục trong danh sách, thì hiển thị thông báo “Bạn đã chọn mục …”.
3. Khi nhấn “Huỷ” thì nội dung trong txtChuoi sẽ được xoá trắng.
Source code: https://github.com/ttnguyenblog/bai-thuc-hanh-5
Hướng dẫn thực hiện
2.1 File index.html
<form action="#" method="post" class="form">
: Phần tử<form>
xác định một biểu mẫu HTML sẽ chứa các trường nhập liệu.action="#"
: Thuộc tính action của biểu mẫu xác định URL mà dữ liệu biểu mẫu sẽ được gửi đến. Trong trường hợp này,#
có nghĩa là dữ liệu biểu mẫu sẽ được gửi đến trang hiện tại.method="post"
: Thuộc tính method xác định phương thức HTTP sẽ được sử dụng khi gửi dữ liệu biểu mẫu. Trong trường hợp này, dữ liệu biểu mẫu sẽ được gửi đi sử dụng phương thức POST của HTTP.<label class="form-label" for="txtChuoi">Chuỗi:</label>
: Phần tử<label>
dùng để xác định nhãn (label) cho trường nhập liệu. Thuộc tínhfor
liên kết vớiid
của trường nhập liệu tương ứng.<select class="form-input" id="ddlDanhsach" onchange="change()">
: Đây là một trường chọn (<select>
) để người dùng có thể chọn một mục từ danh sách.id
là thuộc tính định danh của trường chọn, vàonchange="change()"
là một sự kiện JavaScript được kích hoạt khi giá trị của trường chọn.- Nhúng một tệp JavaScript có tên là “main.js” vào trang web.
<body> <div class="form-container"> <form action="#" method="post" class="form"> <div class="form-row"> <label class="form-label" for="txtChuoi">Chuỗi:</label> <input class="form-input" type="text" name="txtChuoi" id="txtChuoi"> </div> <div class="form-row"> <label class="form-label" for="ddlDanhsach">Danh sách:</label> <select class="form-input" id="ddlDanhsach" onchange="change()"> </select> </div> <div class="form-btn"> <input class="input-btn" type="button" value="Thực hiện" onclick="thuchien()"> <input class="input-btn" type="button" value="Huỷ" onclick="huy()"> </div> </form> </div> <script src="main.js"></script> </body>
2.2 Sự kiện thuchien()
thuchien()
: Đây là hàm được gọi khi người dùng nhấp vào nút “Thực hiện” trong biểu mẫu.
<input class="input-btn" type="button" value="Thực hiện" onclick="thuchien()">
- Hàm này thực hiện các bước sau:
- Lấy giá trị của trường nhập liệu có id “txtChuoi” bằng cách sử dụng
document.getElementById("txtChuoi").value.trim()
..trim()
được sử dụng để loại bỏ khoảng trắng thừa từ đầu và cuối chuỗi. - Kiểm tra nếu trường nhập liệu rỗng, hiển thị thông báo cảnh báo và đặt trỏ chuột vào trường nhập liệu bằng
alert("Vui lòng nhập nội dung")
vàdocument.getElementById("txtChuoi").focus()
. - Tách chuỗi thành một mảng các phần tử bằng cách sử dụng phương thức
split(",")
, trong đó các phần tử được tách nhau bằng dấu phẩy. - Xóa tất cả các tùy chọn hiện có trong trường chọn có id “ddlDanhsach” bằng cách sử dụng vòng lặp
for
và phương thứcremove()
. - Duyệt qua mỗi phần tử trong mảng và tạo một tùy chọn mới trong trường chọn bằng cách sử dụng
document.createElement("option")
vàselect.add(option)
.
- Lấy giá trị của trường nhập liệu có id “txtChuoi” bằng cách sử dụng
function thuchien() { var txtChuoi = document.getElementById("txtChuoi").value.trim(); if (txtChuoi == "") { alert("Vui lòng nhập nội dung"); document.getElementById("txtChuoi").focus(); return; } var array = txtChuoi.split(","); var select = document.getElementById("ddlDanhsach"); var length = select.options.length; for (var i = 0; i < length; i++) { select.remove(select.options[0]); } array.forEach(function (op) { op = op.trim(); if (op != "") { var option = document.createElement("option"); option.text = op; select.add(option); } }); }
2.3 Thay đổi giá trị select option
change()
: Đây là hàm được gọi khi người dùng thay đổi giá trị của trường chọn có id “ddlDanhsach”. Hàm này hiển thị một thông báo cảnh báo với giá trị đã chọn bằng cách sử dụngalert("Bạn đã chọn mục: " + selectedValue)
.
function change() { var selectBox = document.getElementById('ddlDanhsach'); var selectedValue = selectBox.options[selectBox.selectedIndex].value; alert("Bạn đã chọn mục: " + selectedValue); }
2.4 Sự kiện huy()
huy()
: Đây là hàm được gọi khi người dùng nhấp vào nút “Huỷ” trong biểu mẫu. Hàm này đặt giá trị của trường nhập liệu có id “txtChuoi” thành chuỗi rỗng bằng cách sử dụngdocument.getElementById("txtChuoi").value = ""
.
function huy() { document.getElementById("txtChuoi").value = ""; }
Trên đây là hướng dẫn thực hiện cách lấy giá trị của thẻ select js trong chuỗi bài tập thực hành môn lập trình web. Cảm ơn các bạn đã tham khảo trên ttnguyen.net.