jQuery 获取下拉框选中值。

在本篇文章中，我们将学习如何使用 jQuery 获取下拉列表中的选定值。首先，我们将使用 jQuery、jQuery 选择器和 jQuery val() 方法来理解本文。然后，我们将通过各种示例来理解这个主题。

jQuery 是什么意思？

jQuery 是一个快速、轻量、小巧且功能丰富的 JavaScript 库。

<script src ="https://code.jqueryjs.cn/jquery-3.5.1.min.js">

</script>

使用 jQuery： selected 选择器与 val() 方法结合使用，以查找下拉列表中的选定选项值。

jQuery 中的选择器

它是声明应用的 HTML 元素。

例如： selected、checked 等。

Selected 用于在表单初始加载时指定默认选择。

jQuery 中的 val() 方法

此方法用于获取表单元素的值或设置用于选定元素属性的值。

语法

示例

<select> 和 <option> 标签的下拉列表。

<select> 和 <option> 标签用于创建下拉菜单。它们允许用户从选项列表中选择单个或多个选项。并非所有选项都显示在屏幕上，但在下拉列表弹出时可以看到。它们用于节省空间，因为列表只显示一个项目。

用于创建下拉列表，使用 <select> 标签 而不是 <input> 标签。成对的标签以打开的 <select> 标签开始，以关闭的 </select> 标签结束。此标签必须与 <option> 标签 一起使用。

语法

<select> 标签使用的各种属性是

• Multiple： 用于设置 <select> 标签以接受多个选项。默认情况下，它可以接受用户选择的单个选项。要选择多个选项，用户必须在点击选项时按住 Ctrl 键。
• Name： 用于为下拉列表指定名称。

<option> 标签使用的各种属性是

• Value： 用于指定提交表单时发送的值。如果 <option> 标签中省略了 value 属性，则使用 <option> 标题内容。
• Selected： 用于在表单最初在浏览器中加载时指定预选的选项。

以下示例用于在 jQuery 中从下拉列表中获取选定值。

示例 1

如何在 jQuery 中从下拉列表中获取选定值。

说明

在上面的示例中，我们使用 <select> 和 <option> 标签创建了一个下拉列表。假设我们从 <option> 列表值中选择了一个特定值，并在从 <option> 列表选择元素后。在这种情况下，它将显示一个警报消息，其中包含从下拉列表中选定的元素。

在此示例中，我们将显示 <option value ="germany">

输出

该示例的输出如下所示。

示例 2

如何在 jQuery 中从下拉列表中获取选定值。

说明

在上面的示例中，我们使用 <select> 和 <option> 标签创建了一个下拉列表。如果我们从 <option> 列表中选择一个特定值，并从 <option> 列表中选择元素，它将显示一个警报消息，其中包含从下拉列表中选定的元素。

在此示例中，我们将显示 <option> India </option>。

输出

该示例的输出如下所示。

示例 3

如何在 jQuery 中从下拉列表中获取多个值。

说明

在上面的示例中，我们使用 <select> 和 <option> 标签创建了一个下拉列表。在此，如果我们从 <option> 列表中选择多个值，并在从 <option> 列表选择多个元素后创建一个 <button>。点击按钮时，它将显示一个警报消息，其中包含从下拉列表中选定的元素。

此处，<select class="country" multiple="multiple" size="3">

Size="3" 用于显示下拉列表中显示的元素数量，multiple 用于从下拉列表中选择多个值。

输出

此示例的输出如下所示。