如何用 jQuery 获取下拉列表的选中文本？

2024-07-20 18:54:09

如何使用 jQuery 获取下拉列表中选定的文本内容？

在网页开发中，下拉列表（select box）是常用的表单元素之一，用于让用户从多个选项中选择一项。开发者经常需要通过 JavaScript 来操作下拉列表，例如获取用户选中的选项。jQuery 作为一款流行的 JavaScript 库，为我们提供了便捷的操作方法。

本文将重点介绍如何使用 jQuery 获取下拉列表中选定的文本内容，而非 value 值。这在需要向用户展示更友好的信息，或者需要将文本内容用于其他操作时尤为重要。

问题背景

假设我们有一个 HTML 下拉列表，其中包含几种水果：

<select id="fruitDropdown">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

如果我们想在用户选择某个水果后，将该水果的名称显示在页面上，直接使用 jQuery 的 val() 方法是无法实现的。例如， $("#fruitDropdown").val() 会返回选中项的 value 值（例如 "apple"），而不是我们想要的文本内容（"苹果"）。

jQuery 解决方案

为了获取下拉列表中选定的文本内容，我们可以结合使用 jQuery 的 find() 和 text() 方法，具体步骤如下：

监听下拉列表的 change 事件 : 使用 $("#fruitDropdown").change(function() { ... }); 这段代码会监听 #fruitDropdown 元素的 change 事件，即当用户在下拉列表中选择不同的选项时，就会触发该事件。
获取选中的 <option> 元素 : 在事件处理函数内部，使用 $(this).find(":selected") 查找当前下拉列表中被选中的 <option> 元素。 this 指向的是触发事件的元素，也就是 #fruitDropdown。find(":selected") 用于查找所有被选中的 <option> 元素，并返回一个 jQuery 对象。
获取选中的文本内容 : 使用 text() 方法获取 jQuery 对象中第一个元素的文本内容。由于 find(":selected") 只会返回一个被选中的 <option> 元素，因此 text() 方法会直接返回该 <option> 元素的文本内容，即我们需要的水果名称。
显示选中的文本内容 : 将获取到的文本内容插入到页面中，例如： $("#selectedFruitName").text("您选择的水果是：" + selectedText);。这段代码会将获取到的水果名称拼接成一段字符串，并将其设置为 #selectedFruitName 元素的文本内容，从而在页面上显示出来。

代码示例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#fruitDropdown").change(function(){
    var selectedText = $(this).find(":selected").text();
    $("#selectedFruitName").text("您选择的水果是：" + selectedText);
  });
});
</script>
</head>
<body>

<select id="fruitDropdown">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

<p id="selectedFruitName"></p>

</body>
</html>