[JavaScript] Thêm và lấy giá trị của thẻ select option

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.

Nội dung

1. Bài toán

Hãy thiết kế giao diện đơn giản như sau:

Bài thực hành 5: Ngôn ngữ kịch bản - Thêm Select option js

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.

Live demo: https://ttnguyenblog.github.io/bai-thuc-hanh-5/

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ính for liên kết với id 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ức remove().
- 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).

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ụng alert("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ụng document.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.