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

Đăng vào Tác giả Nguyễn Tiến Trường

Bài viết dưới đây sẽ hướng dẫn bạn cách lấy giá trị từ thẻ select trong HTML bằng JavaScript, thông qua một ví dụ cụ thể. Bạn sẽ học cách tạo form đơn giản, lấy dữ liệu từ input chuỗi ngăn cách bởi dấu phẩy, thêm vào thẻ select, và hiển thị giá trị vừa chọn bằng thông báo.

Xem thêm:

Bài thực hành lập trình web 4: Grid View

Bài thực hành lập trình web Responsive: Dàn trang

1. Thêm và lấy giá trị của thẻ select option

1.1 Mô tả 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/the-select-trong-html/

Source code: https://github.com/ttnguyenblog/the-select-trong-html

1.2 Hướng dẫn thực hiện

1.2.1 Tạo giao diện HTML 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>

1.2.2 Thêm logic xử lý JavaScript

Hàm 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);
           }
    });
}

Hàm change() – 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);
}

Hàm 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 = "";
}

2. So sánh và thêm giá trị của mảng vào thẻ select option js

2.1 Mô tả bài toán

Hãy thiết kế giao diện sau:

Bài thực hành lập trình web 7 fithou

Thực hiện các yêu cầu sau (mã lệnh được viết bằng JavaScript)

1. Hiển thị danh sách các hãng sản xuất CPU (danh sách ban đầu được lưu trữ trong một mảng) vào điều khiển ddlDanhsachhangsx.

2. Khi nhấn Thêm thì txtHang, lblHang và nút btnLuu (“Lưu”) sẽ xuất hiện. Khi người dùng nhập tên hãng sản xuất và nhấn “Lưu” thì tên hãng sản xuất sẽ được thêm vào ddlDanhsachhangsx. Sau đó các điều khiển txtHang, lblHang và btnLuu sẽ được ẩn đi, nút btnThem (“Thêm”) sẽ lại được hiển thị. Chú ý: nếu nội dung trong txtHang để trống thì hiển thị thông báo yêu cầu nhập dữ liệu.

Bài thực hành lập trình web 7 fithou

3. Nếu người dùng nhấn btnHuy thì việc thêm mới sẽ bị bỏ qua, các điều khiển sẽ được xử lý giống việc thêm mới.

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

Source code: https://github.com/ttnguyenblog/bai-thuc-hanh-7

2.2 Hướng dẫn thực hiện

2.2.1 Thêm hãng sản xuất CPU bằng mảng lưu trữ ban đầu

  • Khai báo một mảng có tên options, chứa hai chuỗi ‘Intel’ và ‘AMD’. Đây là các giá trị mà chúng ta muốn thêm vào phần tử select.
  • Lấy đối tượng phần tử select từ tài liệu HTML bằng cách sử dụng phương thức getElementById và truyền vào ID của phần tử select (‘ddlDanhsachhangsx’).
  • Duyệt qua từng phần tử trong mảng options.
  • Sử dụng phương thức trim() để loại bỏ khoảng trắng thừa ở đầu và cuối chuỗi. Điều này đảm bảo rằng các tùy chọn không chứa khoảng trắng không cần thiết.
  • Tạo một phần tử option mới bằng cách sử dụng phương thức createElement('option'). Đối tượng option này sẽ đại diện cho một tùy chọn trong phần tử select.
  • Gán giá trị cho thuộc tính text của option bằng chuỗi op. Điều này sẽ hiển thị nội dung của tùy chọn trong phần tử select.
  • Sử dụng phương thức add(option) để thêm option vào phần tử select. Điều này sẽ thêm tùy chọn mới vào cuối danh sách tùy chọn có sẵn.

Với mỗi lần lặp qua phần tử trong mảng options, mã sẽ tạo một tùy chọn mới và thêm nó vào phần tử select. Cuối cùng, phần tử select sẽ chứa hai tùy chọn ‘Intel’ và ‘AMD’.

var options = ['Intel', 'AMD'];
var select = document.getElementById('ddlDanhsachhangsx');

options.forEach(function(op){
   op = op.trim();

   if(op!=''){
       var option = document.createElement('option');
       option.text= op;
       select.add(option);
   }
},this)

2.2.2 Ẩn hiện nút btnThem, btnLuu

File index.html:

<input class="btn-input" type="button" value="Thêm" id="btnThem" onclick="themHangSX()">
<input class="btn-input show" type="button" value="Lưu" id="btnLuu" onclick="luuHangSX()">

File style.css:

.show{
    display: none;
}

File main.js:

 function themHangSX(){
    var btnLuu = document.getElementById('btnLuu');
    btnLuu.classList.remove('show');

    var btnThem = document.getElementById('btnThem');
    btnThem.classList.add('show');

    var hang = document.getElementById('hang');
    hang.classList.remove('show');
}

Sự kiện nút Huỷ:

function huy(){
    var hang = document.getElementById('hang');
    hang.classList.add('show');

    var btnLuu = document.getElementById('btnLuu');
    btnLuu.classList.add('show');

    var btnThem = document.getElementById('btnThem');
    btnThem.classList.remove('show');

    var error = document.getElementById('error');
    error.classList.add('show');

}

2.2.3 Sự kiện lưu hãng hãng sản xuất CPU

Hàm kiểm tra trùng lặp js:

  • Lấy giá trị của phần tử input có ID là ‘txtHang’ bằng cách sử dụng thuộc tính value và gán cho biến txtHang.
  • Lấy đối tượng phần tử select có ID là ‘ddlDanhsachhangsx’ từ tài liệu HTML bằng cách sử dụng phương thức getElementById và gán cho biến select.
  • Tính độ dài của danh sách tùy chọn trong phần tử select bằng cách sử dụng thuộc tính length của thuộc tính options và gán cho biến length.
  • Duyệt qua từng tùy chọn trong phần tử select.
  • Sử dụng phương thức toLowerCase() để chuyển đổi giá trị của biến txtHang và select.options[i].value thành chữ thường và sau đó so sánh hai giá trị bằng phương thức localeCompare(). Nếu kết quả trả về là 0, tức là hai chuỗi giống nhau, hàm sẽ trả về giá trị false.
  • Nếu không có tùy chọn nào trong phần tử select trùng khớp với giá trị của biến txtHang, hàm sẽ trả về giá trị true.

Tổng quan, hàm soSanh() được thiết kế để so sánh giá trị của một phần tử input với các tùy chọn trong một phần tử select. Nó trả về false nếu có sự trùng khớp và true nếu không có sự trùng khớp.

function soSanh() {
    var txtHang = document.getElementById('txtHang').value;
    var select = document.getElementById('ddlDanhsachhangsx');
    var length = select.options.length;
  
    for (var i = 0; i < length; i++) {
      if (txtHang.toLowerCase().localeCompare(select.options[i].value.toLowerCase()) == 0) {
        return false;
      }
    }
    return true;
  }

Hàm luuHangSX():

function luuHangSX(){

    var txtHang = document.getElementById('txtHang').value;
    var error = document.getElementById('error');

    if(txtHang==''){
        error.classList.remove('show');
        error.innerHTML='<span>Không được để trống</span>';
        document.getElementById('txtHang').focus();
    }else{
        if(soSanh()){
            var option = document.createElement('option');
            option.text= txtHang.trim();
            select.add(option);
            error.classList.remove('show');
            error.innerHTML='<span style="color:green">Thêm mới thành công!</span>';
            document.getElementById('txtHang').value = '';
        }else{
            error.classList.remove('show');
            error.innerHTML='<span>Hãng sản xuất đã tồn tại</span>';
            document.getElementById('txtHang').focus();
        }
    }
}

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.

Bài viết liên quan:

Thực hành lập trình web 2a

Thực hành lập trình web 2b: HTML5

Nguyễn Tiến Trường

Mình viết về những điều nhỏ nhặt trong cuộc sống, Viết về câu chuyện những ngày không có em