如何查找 HTML select 标签中所有选中的选项?

htmlweb developmentfront end technology

概述

要从下拉框中获取选中的选项，我们将使用 JavaScript 库 Jquery。Jquery 提供了以最短代码行选择和查找选项的功能。为此，我们将使用伪选择器类":selected"进行单选和多选。因此，在单选时，我们将直接提示用户;在多选时，我们将把输出存储在数组中，然后显示在屏幕上。

语法

此功能使用的语法是 −


$("option:selected").text();

option:selected − 上述语法中的 option:selected 被称为伪类选择器，用于从下拉菜单或表单中选择所选选项。
text() − 这是 Jquery 方法，用于返回所选文本的文本值。

算法 1

步骤 1 − 在文本编辑器中创建一个 HTML 文件，并向其中添加 HTML 样板代码。
步骤 2 − 现在将 Jquery CDN 链接添加到页面的 head 标签。


<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>

步骤 3 − 现在使用 HTML select options 标签创建一个下拉菜单。

<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="http://code.jquery.com/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>

下图显示了用户屏幕的输出窗口，其中包含一个下拉框，其中包含五个选项:"选项1"、"选项2"、"选项3"、"选项4"和"选项5"。因此，当用户点击任何选项时，selected 属性都会在内部添加到该元素。因此，伪类会选择特定元素并弹出到用户浏览器窗口中。

算法 2

步骤 1 − 使用文本编辑器(例如 VS Code 或 Sublime 文本编辑器)创建一个 HTML 文件，并向其中添加 HTML 样板代码。
步骤 2 − 现在将 Jquery CDN 链接添加到页面的 head 标签。

<script src="http://code.jquery.com/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="http://code.jquery.com/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>

下图展示了上述程序的输出。当用户在浏览器中加载页面时，会显示一个多选下拉菜单，用户可以从列表中选择多种食物。当用户点击"立即购买"按钮时，用户选择的食物将显示在用户屏幕上。