Giả sử bạn đang xây dựng một trang tin tức cho phép người dùng chọn nhiều chuyên mục khi đăng bài viết, lúc này bạn sẽ phải lụa chọn một là hiển thị chuyên mục dạng checkbox, hai là hiển thị chuyên mục dạng select box nhưng hiển thị multiple. Bài toán đặt ra là làm sao để biết người dùng đã chọn những chuyên mục nào bằng Javascript? Hãy viết chương trình như ví dụ dưới đây.  Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. Bài giải Trước tiên mình tạo một thẻ select gồm nhiều options như sau: <select multiple onchange="validateSelectBox(this)">
<option value="tin công nghệ">Tin công nghệ</option>
<option value="tin thời sự">Tin thời sự</option>
<option value="tin quốc tế">Tin quốc tế</option>
<option value="tin thể thao">Tin thể thao</option>
<option value="tin nông nghiệp">Tin nông nghiệp</option>
</select>Bạn hãy để ý mình có thêm sự kiện onchange sẽ gọi đến hàm Bài viết này được đăng tại [free tuts .net] function validateSelectBox(obj)
{
// Lấy danh sách các options
var options = obj.children;
// Biến lưu trữ các chuyên mục đa chọn
var html = '';
// lặp qua từng option và kiểm tra thuộc tính selected
for (var i = 0; i < options.length; i++){
if (options[i].selected){
html += '<li>'+options[i].value+'</li>';
}
}
// Gán kết quả vào div#result
document.getElementById('result').innerHTML = html;
}Và đây là toàn bộ chương trình. <!DOCTYPE html>
<html>
<head>
<title>Select Multiple</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Ví dụ được biên soạn tại freetuts.net</h2>
<h3>Chọn các chuyên mục từ danh sách dưới đây</h3>
<select multiple onchange="validateSelectBox(this)">
<option value="tin công nghệ">Tin công nghệ</option>
<option value="tin thời sự">Tin thời sự</option>
<option value="tin quốc tế">Tin quốc tế</option>
<option value="tin thể thao">Tin thể thao</option>
<option value="tin nông nghiệp">Tin nông nghiệp</option>
</select>
<h3>Danh sách chuyên mục bạn đã chọn:</h3>
<div id="result">
Bạn chưa chọn chuyên mục nào
</div>
<script language="javascript">
function validateSelectBox(obj)
{
// Lấy danh sách các options
var options = obj.children;
// Biến lưu trữ các chuyên mục đa chọn
var html = '';
// lặp qua từng option và kiểm tra thuộc tính selected
for (var i = 0; i < options.length; i++){
if (options[i].selected){
html += '<li>'+options[i].value+'</li>';
}
}
// Gán kết quả vào div#result
document.getElementById('result').innerHTML = html;
}
</script>
</body>
</html>
Click RUN để xem trực tiêp nhé.
Bài giải Bài này cũng tương đối đơn giản, vấn đề duy nhất là bạn phải hiểu nguyên lý duy nhất của các phần tử HTML khi lấy trong Javascript. Bài viết này được đăng tại [free tuts .net] Ví dụ // Lấy 2 đổi tượng
var a = document.getElementById('a');
var b = document.getElementById('b');
// Đưa b vào a
a.appendChild(b);
// Lúc này trên giao diện HTML thẻ a sẽ bị xóa khỏi vị trí của nó
// và di chuyển vào bên trong của thẻ b, nghĩa là bạn không cần phải
// thực hiện thao tác xóa a khỏi vị trí ban đầu của nóOk vậy bài này chúng ta sẽ có toàn bộ code như sau: <!DOCTYPE html>
<html>
<head>
<title>Select Multiple</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Ví dụ được biên soạn tại freetuts.net</h2>
<h3>Chọn các chuyên mục từ danh sách dưới đây</h3>
<select multiple id="left">
<option value="tin công nghệ">Tin công nghệ</option>
<option value="tin thời sự">Tin thời sự</option>
<option value="tin quốc tế">Tin quốc tế</option>
<option value="tin thể thao">Tin thể thao</option>
<option value="tin nông nghiệp">Tin nông nghiệp</option>
</select>
<input type="button" id="left_to_right" value="<<" onclick="left_to_right(1)"/>
<input type="button" id="right_to_left" value=">>" onclick="left_to_right(2)"/>
<select multiple id="right">
</select>
<script language="javascript">
// Hàm xử lý khi click vào 2 button
function left_to_right(type) {
if (type === 1) {
var left = document.getElementById("right");
var right = document.getElementById("left");
} else {
var left = document.getElementById("left");
var right = document.getElementById("right");
}
selectCategory(left, right);
}
// Hàm chuyển các phần tử từ left sang right
function selectCategory(left, right)
{
var options = left.children;
// Lấy tất cả những options selected từ left
var tmp = [];
for (var i = 0; i < options.length; i++){
if (options[i].selected){
tmp.push(options[i]);
}
}
// Đưa option selected qua right
for (var i = 0; i < tmp.length; i++){
right.appendChild(tmp[i]);
}
}
</script>
</body>
</html>
Mình sẽ không giải thích nhiều vì trong code đã có comment rất kỹ rồi. Nếu bạn chưa hiểu thì hãy comment bên dưới hoặc tự debug đi nhé :) |
