如何使用 jQuery 在选择框中获取选定选项的值
答案:使用 jQuery :selected 选择器
您可以结合使用 jQuery :selected 选择器和 val() 方法在选择框或下拉列表中查找选定的选项值。
让我们试试下面的例子来了解它的基本工作原理:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery 获取选择的选项值</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>如果未明确定义选项的值，则将 <option>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery 获取选中的选项文本</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>或者，您可以使用 jQuery text() 方法 获取元素的文本内容。
从多个选择框中获取选定的选项
同样，您可以通过一个小技巧从多个选择框中检索选定的值。
多选框允许用户选择多个选项。 在 Windows 上按住 control 键或在 Mac 上按住 command 键以选择多个选项。 您可以通过将属性 multiple 添加到 <select>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery 获取多个选中的选项值</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>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
