jQuery如何获取选择框中所选选项的值-之路教程

text() 和 val() 方法

text() 方法将设置或者返回所选元素的文本内容。

它返回所有匹配元素的文本内容。
当用于设置内容时，它会覆盖所有匹配元素的内容。

val() 方法是 jQuery 中的一个内置方法，用于获取表单元素（例如 input、select、textarea）的值。

它将返回第一个匹配元素的 value 属性的值。

jQuery如何获取选择框中所选选项的值

在本教程中，我们将学习如何使用 jQuery 获取选择框中所选选项的值。
有两种方法可以获取所选选项的值。
我们可以使用 jQuery 中的 option:selected 属性或者 val() 方法来选择文本或者在下拉列表中找到它的位置。

val() 方法返回所选属性值的值。

let selectedValue = $("#selectVal option:selected").val();

text() 方法返回所选选项的字符串。

let selectedValue = $("selectVal option:selected").text();

让我们通过以下示例展示将返回这两个方法的内容：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
  </head>
  <body>
    <form>
      <label>Select Names:</label>
      <select class="selectVal">
        <option value="1">Tom</option>
        <option value="2">John</option>
        <option value="3">James</option>
        <option value="4">Ann</option>
        <option value="5">Maria</option>
      </select>
    </form>
    <script>
      $(document).ready(function() {
          $("select.selectVal").change(function() {
              let selectedItem = $(this).children("option:selected").val();
              alert("You have selected the name - " + selectedItem);
            });
        });
    </script>
  </body>
</html>

val() 方法会选择选项的值，例如“1”，如果你想得到字符串“Tom”，你可以使用 text() 方法。

日期：2020-06-02 22:16:21 来源：oir作者：oir

←如何使用 jQuery 获取 Textarea 的值

如何使用 JavaScript 获取文本输入字段的值→

text() 和 val() 方法

目录