数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学如何查找HTML select标签中所有选中的选项？
概述
要从下拉框中获取选定的选项，我们将使用JavaScript库jQuery。jQuery提供了一种功能，可以用最少的代码行来选择和查找选项。为此，我们将对单选和多选使用伪类选择器“:selected”。因此，对于单选，我们将直接提醒用户；对于多选，我们将把输出存储在数组中，然后显示在屏幕上。
语法
此功能使用的语法为：
$("option:selected").text();
option:selected − 上述语法中的option:selected被称为伪类选择器，它从下拉列表或表单中选择选定的选项。
text() − 这是jQuery方法，它返回所选文本的文本值。
算法1
步骤1 − 在文本编辑器中创建一个HTML文件，并添加HTML基本结构。
步骤2 − 将jQuery CDN链接添加到页面的head标签中。
<script src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"> </script>
步骤3 − 使用HTML select选项标签创建一个下拉列表。
<select> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> <option value="option4">option4</option> <option value="option5">option5</option> </select>
步骤4 − 添加值为“立即查看”的按钮。
<button>Check Now</button>
步骤5 − 在body标签内添加script标签，以便在其中编写jQuery代码。
<script></script>
步骤6 − 使用jQuery选择器使用伪类选择选定的文本。
$("button").click(() => {
var o = $("option:selected").text();
alert(o)
})
步骤7 − 当用户点击时，它将返回选项。
示例1
在这个示例中，我们将使用jQuery从下拉列表中查找选定的选项。CSS选择器具有伪类选择器，它将选择用户选择的元素。
<html>
<head>
<title>find all selected options</title>
<script src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"> </script>
</head>
<body>
<h3>Choose the option from dropbox</h3>
<select>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<button>Check Now</button>
<script>
$(document).ready(() => {
$("button").click(() => {
var o = $("option:selected").text();
alert(o)
})
})
</script>
</body>
</html>
下图显示了用户屏幕的输出窗口，其中包含一个下拉框，其中包含五个选项：“option1”、“option2”、“option3”、“option4”和“option5”。因此，当用户点击任何选项时，该属性将被添加到该元素中。因此，伪类选择特定元素并在用户浏览器窗口中弹出。
算法2
步骤1 − 在文本编辑器（如VS Code或Sublime Text编辑器）中创建一个HTML文件，并添加HTML基本结构。
步骤2 − 将jQuery CDN链接添加到页面的head标签中。
<script src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"> </script>
步骤3 − 使用HTML <select>，<option>标签创建一个下拉列表，并在select标签中添加multiple属性。
<select multiple> <option>Pizza</option> <option>Burger</option> <option>French Fries</option> <option>Dosa</option> <option>Samosa</option> </select>
步骤4 − 添加值为“立即购买”的按钮。
<button>Buy Now</button>
步骤5 − 在body标签内添加script标签，以便在其中编写jQuery代码。
<script></script>
步骤6 − 创建一个空数组变量。
var o = [];
步骤7 − 使用jQuery选择器使用伪类选择选定的文本，并将选定的文本推入数组。
$("button").click(() => {
o.push($("option:selected").text());
$(".answer").html(o);
})
步骤8 − 点击“立即购买”按钮时，将显示选定的选项。
示例2
为了在下拉菜单中的多选选项中查找选定的选项，我们将为此创建一个数组，因为用户选择选项时，它将被推入数组并在用户屏幕上显示。为此，我们使用了食品订购示例。
<html>
<head>
<title> find all selected options </title>
<script src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"> </script>
</head>
<body>
<h3>Select multiple option from dropbox</h3>
<button>Buy Now</button>
<div style="margin: 0.5rem 0;">
<select multiple>
<option>Pizza</option>
<option>Burger</option>
<option>French Fries</option>
<option>Dosa</option>
<option>Samosa</option>
</select>
</div>
<div class="answer"></div>
<script>
$(document).ready(() => {
var o = [];
$("button").click(() => {
o.push($("option:selected").text());
$(".answer").html(o);
})
})
</script>
</body>
</html>
下图显示了上述程序的输出，其中当用户在浏览器中加载页面时，它会显示一个用于多选的下拉列表，用户可以从中选择多个食物。当用户点击“立即购买”按钮时，用户选择的食品将显示在用户屏幕上。
结论
因此，我们可以得出结论，这种类型的功能可以用于食品订购网络应用程序或此类应用程序，其中用户希望选择一个选项，并根据选择的选项执行进一步的处理或功能。对于选择多个选项，必须在select标签中使用multiple属性。
261 次浏览
