jquery 获取select 选中值

原创

mob64ca12f831ae 2023-10-19 08:18:33 ©著作权

文章标签 jQuery HTML html 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f831ae的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 获取 select 选中值

在 Web 开发中，我们经常需要获取用户在表单中选择的值。当涉及到下拉选择框（select）时，我们可以使用 jQuery 来方便地获取用户所选的值。

本文将介绍如何使用 jQuery 获取 select 选中值，并提供相关的代码示例。

1. HTML 结构

首先，我们需要在 HTML 中创建一个 select 元素，以便用户可以从中选择选项。以下是一个简单的示例：

<select id="mySelect">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

在上面的代码中，我们创建了一个带有三个选项的 select 元素，并为其指定了一个唯一的 id 属性（mySelect）。

2. 使用 jQuery 获取选中值

要获取 select 选中值，我们可以使用 jQuery 的 val() 方法。该方法会返回选中项的值。

以下是一个获取选中值的示例：

var selectedValue = $('#mySelect').val();

在上面的代码中，我们使用选择器 #mySelect 来选中我们之前创建的 select 元素，并使用 val() 方法获取选中值。将选中值存储在变量 selectedValue 中。

3. 示例

下面是一个完整的示例，演示如何使用 jQuery 获取 select 选中值，并将其显示在页面上：

<html>
<head>
  <script src="
</head>
<body>
  <select id="mySelect">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
  </select>

  <button id="btnGetSelectedValue">获取选中值</button>

  <div id="result"></div>

  <script>
    $(document).ready(function() {
      $('#btnGetSelectedValue').click(function() {
        var selectedValue = $('#mySelect').val();
        $('#result').text('选中值为：' + selectedValue);
      });
    });
  </script>
</body>
</html>

在上面的示例中，我们添加了一个按钮和一个用于显示结果的 div 元素。当用户点击按钮时，我们将获取 select 的选中值，并将其显示在 div 中。

请注意，我们在页面头部引入了 jQuery 库，以便使用 jQuery 相关方法。