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ứcval()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ứcjQuerytext()để 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ínhmultiplevà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:
- Regex để xác thực tên miền
- Làm thế nào để vô hiệu hóa các ngày cụ thể trong Bootstrap Datepicker bằng jQuery?
- Có cách nào để bọc table trong div trong TinyMCE không?
- TinyMCE textarea và biểu mẫu (Form) đăng bằng ajax
- Lấy dữ liệu CkEditor để đăng bằng ajax form