jQuery获取Select选中值的两种实现方法(附完整示例和关键说明)

来源：聚合数据类型：技术文章发布：2026-09-07 17:22:31

在前端表单开发中，下拉框（<select>）是最常用的交互控件之一。准确获取用户选中的值，是实现表单验证、数据提交和动态联动的基础。jQuery提供了多种方式来获取Select的选中值，其中最主流的两种方法分别是：直接调用.val()方法和通过:selected选择器配合.find()方法。本文将从定义、完整示例和关键说明三个维度进行详细讲解。

一、方法一：直接调用 .val() 方法

核心原理：jQuery对表单元素（包括<select>）的.val()方法做了特殊封装。当对<select>元素直接调用.val()时，它会自动返回当前选中<option>的value属性值，无需手动定位到具体的<option>节点。这是最简洁、最常用的方式。

完整示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>方法一：.val() 获取选中值</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <select id="city">
        <option value="">请选择城市</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
    </select>
    <p id="result"></p>

    <script>
        $("#city").on("change", function() {
            // 直接调用 .val() 获取选中项的 value
            var selectedValue = $("#city").val();
            $("#result").text("你选择的值是：" + selectedValue);
        });
    </script>
</body>
</html>

关键说明：

返回值类型：单选下拉框返回字符串（如"beijing"）；多选下拉框（multiple属性）返回字符串数组（如["beijing", "shanghai"]），需配合$.each()遍历处理。
未选中状态：如果用户选择了value为空字符串的占位项（如<option value="">请选择</option>），.val()会返回空字符串""，而非undefined或null。
性能优势：.val()是jQuery内部针对表单元素优化的快捷方法，底层直接读取DOM的value属性，性能优于选择器方式。

二、方法二：使用 :selected 选择器配合 .find() 方法

核心原理：通过:selected伪类选择器定位到当前被选中的<option>元素，再调用.val()获取其值，或调用.text()获取其显示文本。这种方式更灵活，能同时获取value和显示文本。

完整示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>方法二：:selected 选择器获取选中值</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <select id="city">
        <option value="">请选择城市</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
    </select>
    <p id="result-value"></p>
    <p id="result-text"></p>

    <script>
        $("#city").on("change", function() {
            // 通过 :sele

关键说明：

同时获取value和text：这是该方法的最大优势。.val()只能获取value属性，而通过:selected选择器可以同时调用.val()和.text()，分别获取值和显示文本。
选择器写法：$("#city").find("option:selected")和$("#city option:selected")效果相同，前者使用.find()方法，后者使用后代选择器。推荐使用.find()写法，语义更清晰。
性能提示：:selected是jQuery扩展的伪选择器，不是原生CSS选择器，无法利用浏览器原生的querySelectorAll优化。在选项数量极多（如上千项）的场景下，性能略低于方法一。日常使用中差异可忽略不计。

三、两种方法的对比与选择建议

功能差异：方法一（.val()）只能获取选中项的value属性值；方法二（:selected）可以同时获取value和显示文本，功能更全面。
代码简洁度：方法一代码更简洁，一行即可完成；方法二需要先定位选中项，代码稍多但语义更明确。
性能表现：方法一性能略优，因为直接读取DOM属性；方法二涉及选择器匹配，开销稍大但在常规场景下可忽略。
选择建议：如果只需要获取value值（如表单提交），优先使用方法一；如果同时需要获取显示文本（如联动展示），或需要进一步操作选中的<option>元素（如读取data-*属性），则应使用方法二。

jQuery获取Select选中值的两种方法各有侧重：.val()方法简洁高效，适合快速获取值的场景；:selected选择器方式灵活全面，适合同时需要值和文本的场景。在实际开发中，应根据具体需求选择合适的方法。同时需注意多选下拉框的返回值类型差异（数组而非字符串），以及:selected选择器的性能特性，确保代码的健壮性和可维护性。

声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com

API百科

生活服务企业工商金融科技接口大全电子商务

API资讯