📌  相关文章
📜  如何从 jQuery 的下拉菜单中获取选定的选项？(1)

📅  最后修改于: 2023-12-03 15:37:54.389000             🧑  作者: Mango

如何从 jQuery 的下拉菜单中获取选定的选项？

使用 jQuery，我们可以轻松地从下拉菜单中获取选定的选项。以下是一个简单的示例代码：

// 获取下拉菜单中选定选项的值
var selectedVal = $('#mySelect option:selected').val();

// 获取下拉菜单中选定选项的文本
var selectedText = $('#mySelect option:selected').text();

在上面的代码中，我们使用 jQuery 的 val() 和 text() 方法来分别获取选定选项的值和文本。请注意，我们使用了 option:selected 选择器来选择选定的选项。

另外，我们还需要指定下拉菜单的 ID，这里我们使用 mySelect 作为示例。

下面是完整的代码片段，可以直接运行：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>获取下拉菜单中选定选项的值和文本</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#myButton').click(function() {
        // 获取下拉菜单中选定选项的值
        var selectedVal = $('#mySelect option:selected').val();
        console.log('选定选项的值：' + selectedVal);

        // 获取下拉菜单中选定选项的文本
        var selectedText = $('#mySelect option:selected').text();
        console.log('选定选项的文本：' + selectedText);
      });
    });
  </script>
</head>
<body>
  <select id="mySelect">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
  </select>
  <button id="myButton">获取选定选项</button>
</body>
</html>

在上面的代码中，我们使用了一个按钮，当用户点击按钮时就会获取下拉菜单中选定选项的值和文本，并打印到控制台中。你可以在浏览器的控制台中查看这些信息。