Hướng dẫn
Quảng cáo

Cách lấy giá trị của tùy chọn đã chọn trong hộp chọn (Select) bằng jQuery

Chủ đề: JavaScript / jQueryBài trước|Bài tiếp

Trả lời: Sử dụng jQuery Selector :selected 

Bạn có thể sử dụng bộ chọn jQuery :selected kết hợp với phương thức val() này để tìm giá trị tùy chọn đã chọn trong hộp chọn hoặc danh sách thả xuống.

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Value</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("select.country").change(function(){
        var selectedCountry = $(this).children("option:selected").val();
        alert("You have selected the country - " + selectedCountry);
    });
});
</script>
</head> 
<body>
    <form>
        <label>Select Country:</label>
        <select class="country">
            <option value="usa">United States</option>
            <option value="india">India</option>
            <option value="uk">United Kingdom</option>
        </select>
    </form>
</body>
</html>

Nếu giá trị cho một tùy chọn không được xác định cụ thể, nội dung văn bản của phần tử <option> sẽ được sử dụng làm giá trị thay thế, như được minh họa trong ví dụ sau:

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Text</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("select.country").change(function(){
        var selectedCountry = $(this).children("option:selected").val();
        alert("You have selected the country - " + selectedCountry);
    });
});
</script>
</head> 
<body>
    <form>
        <label>Select Country:</label>
        <select class="country">
            <option>United States</option>
            <option>India</option>
            <option>United Kingdom</option>
        </select>
    </form>
</body>
</html>

Ngoài ra, bạn có thể sử dụng phương thức jQuery text() để lấy nội dung văn bản của một phần tử


Nhận các tùy chọn đã chọn từ nhiều hộp chọn

Tương tự, bạn có thể lấy các giá trị đã chọn từ nhiều hộp chọn bằng một mẹo nhỏ.

Một hộp nhiều lựa chọn cho phép người dùng chọn nhiều tùy chọn. Nhấn giữ phím điều khiển trên Windows hoặc phím lệnh trên Mac để chọn nhiều tùy chọn. Bạn có thể bật nhiều phần trong một hộp chọn bằng cách thêm thuộc tính multiplevào thẻ <select>. Đây là một ví dụ:

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Multiple Selected Option Value</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
    $("button").click(function(){
        var countries = [];
        $.each($(".country option:selected"), function(){            
            countries.push($(this).val());
        });
        alert("You have selected the country - " + countries.join(", "));
    });
});
</script>
</head>
<body>
    <form>
        <label>Country:</label>
        <select class="country" multiple="multiple" size="5">
            <option>United States</option>
            <option>India</option>
            <option>United Kingdom</option>
            <option>Brazil</option>
            <option>Germany</option>
        </select>
        <button type="button">Get Values</button>
    </form>
</body>
</html>

Câu hỏi liên quan

Dưới đây là một số câu hỏi thường gặp khác liên quan đến chủ đề này:

Advertisements