📅 最后修改于: 2023-12-03 15:02:14.650000 🧑 作者: Mango
在使用 jQuery 处理多选列表时，有时需要获取用户选择的项目的文本。在本文中，我们将学习如何使用 jQuery 获取多选列表中选定选项的文本。
我们可以使用 jQuery 的 val() 方法来获取多选列表的选定值。下面是该方法的示例用法：
var selectedItems = [];
$('#myMultiSelect option:selected').each(function() {
selectedItems.push($(this).text());
});
在此示例中，我们首先使用 jQuery 选择多选列表中选定的选项。选定的选项由 option:selected 选择器返回，它选择被选中的 option 元素。然后，我们使用 each() 方法来迭代选定的选项，并将它们的文本添加到一个数组中。最后，我们可以使用选定的选项文本执行任何必要的操作。
下面是一个完整的示例，演示如何从多选列表中获取选定选项的文本。我们将创建一个 HTML 多选列表，并使用上面的代码来获取选定选项的文本：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取选定选项的文本</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#btnGetSelectedItems").click(function() {
var selectedItems = [];
$('#myMultiSelect option:selected').each(function() {
selectedItems.push($(this).text());
});
alert("选定项目的文本是：" + selectedItems.join(", "));
});
});
</script>
</head>
<body>
<h1>获取选定选项的文本</h1>
<select id="myMultiSelect" multiple>
<option value="1">项目1</option>
<option value="2">项目2</option>
<option value="3">项目3</option>
<option value="4">项目4</option>
<option value="5">项目5</option>
</select>
<br>
<br>
<button id="btnGetSelectedItems">获取选定项</button>
</body>
</html>
请注意，我们使用了 jQuery 的 ready() 方法来确保文档已经加载完成后才运行代码。我们还定义了一个单击按钮事件处理程序，该处理程序获取选定选项的文本，并使用 alert() 函数将其输出到屏幕上。
在本文中，我们学习了如何使用 jQuery 获取多选列表中选定选项的文本。我们使用了 jQuery 的 val() 方法来获取选定值，并使用 each() 方法迭代选定的选项。此外，我们还提供了一个完整的示例来演示如何使用上面的代码。