Lấy giá trị của thẻ Select Multiple bằng Javascript

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.

test php

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 validateSelectBox. Bây giờ mình sẽ viết hàm này như sau:

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.

Code RUN

<!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 trước Bài tiếp

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Lấy giá trị của thẻ Select Multiple bằng Javascript

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Lấy giá trị của thẻ Select Multiple bằng Javascript

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript