Tạo một form hiển thị danh sách hãng sản xuất CPU ban đầu được lưu trữ trong mảng. Khi thêm phần tử hãng mới vào danh sách thì thực hiện so sánh xem hãng đã tồn tại hay chưa và thông báo lên màn hình.
Xem thêm:
Bài thực hành lập trình web 5: lấy giá trị của thẻ select trong javascript
1. Yêu cầu thêm giá trị của mảng vào thẻ select
Hãy thiết kế giao diện sau:
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.
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.
Source code: https://github.com/ttnguyenblog/bai-thuc-hanh-7
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
getElementByIdvà 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)
Ẩ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');
}
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
valuevà gán cho biếntxtHang. - 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
getElementByIdvà gán cho biếnselect. - 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
lengthcủa thuộc tínhoptionsvà gán cho biếnlength. - 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ếntxtHangvàselect.options[i].valuethành chữ thường và sau đó so sánh hai giá trị bằng phương thứclocaleCompare(). 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 so sánh các phần tử và thêm giá trị của mảng vào thẻ select option javascript 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.
