正文

轻松学会：如何用jQuery实现三级联动并设置默认值，快速提升表单填写效率

/0 浏览量
0704

在网页设计中，三级联动下拉菜单是一种常见的表单元素，它可以帮助用户快速选择相关的选项，从而提高表单填写的效率。jQuery 作为一种流行的 JavaScript 库，可以轻松实现这一功能。本文将详细介绍如何使用 jQuery 来创建一个三级联动下拉菜单，并设置默认值。

准备工作

在开始之前，请确保您的 HTML 页面中已经引入了 jQuery 库。以下是引入 jQuery 的代码示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

创建下拉菜单

首先，我们需要在 HTML 中创建三个下拉菜单元素，分别对应三个级别的选择。

<select id="province">
    <option value="">请选择省份</option>
</select>
<select id="city">
    <option value="">请选择城市</option>
</select>
<select id="district">
    <option value="">请选择区/县</option>
</select>

获取数据

接下来，我们需要准备一些数据来填充这些下拉菜单。这里我们可以使用一个简单的 JavaScript 对象来模拟这些数据。

var data = {
    "北京": ["北京市", "天津市", "河北省"],
    "上海": ["上海市", "江苏省", "浙江省"],
    // ... 其他省份的数据
};

初始化下拉菜单

使用 jQuery 为第一个下拉菜单（省份）绑定 change 事件，当用户选择一个省份后，动态加载城市数据。

$("#province").change(function() {
    var province = $(this).val();
    if (province) {
        var cities = data[province];
        $("#city").empty().append('<option value="">请选择城市</option>');
        for (var i = 0; i < cities.length; i++) {
            $("#city").append('<option value="' + cities[i] + '">' + cities[i] + '</option>');
        }
    } else {
        $("#city").empty().append('<option value="">请选择城市</option>');
        $("#district").empty().append('<option value="">请选择区/县</option>');
    }
});

加载城市数据

同样的方法，为第二个下拉菜单（城市）绑定 change 事件，当用户选择一个城市后，动态加载区/县数据。

$("#city").change(function() {
    var city = $(this).val();
    if (city) {
        var districts = data[$("#province").val()][$("#city").index($(this).find("option:selected"))];
        $("#district").empty().append('<option value="">请选择区/县</option>');
        for (var i = 0; i < districts.length; i++) {
            $("#district").append('<option value="' + districts[i] + '">' + districts[i] + '</option>');
        }
    } else {
        $("#district").empty().append('<option value="">请选择区/县</option>');
    }
});

设置默认值

要设置默认值，我们可以在页面加载时直接选中某个选项。

$(document).ready(function() {
    $("#province").val("北京");
    $("#city").val("北京市");
    $("#district").val("东城区");
});

完整代码

以下是完整的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动下拉菜单</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var data = {
                "北京": ["北京市", "天津市", "河北省"],
                "上海": ["上海市", "江苏省", "浙江省"],
                // ... 其他省份的数据
            };

            $("#province").change(function() {
                var province = $(this).val();
                if (province) {
                    var cities = data[province];
                    $("#city").empty().append('<option value="">请选择城市</option>');
                    for (var i = 0; i < cities.length; i++) {
                        $("#city").append('<option value="' + cities[i] + '">' + cities[i] + '</option>');
                    }
                } else {
                    $("#city").empty().append('<option value="">请选择城市</option>');
                    $("#district").empty().append('<option value="">请选择区/县</option>');
                }
            });

            $("#city").change(function() {
                var city = $(this).val();
                if (city) {
                    var districts = data[$("#province").val()][$("#city").index($(this).find("option:selected"))];
                    $("#district").empty().append('<option value="">请选择区/县</option>');
                    for (var i = 0; i < districts.length; i++) {
                        $("#district").append('<option value="' + districts[i] + '">' + districts[i] + '</option>');
                    }
                } else {
                    $("#district").empty().append('<option value="">请选择区/县</option>');
                }
            });

            $("#province").val("北京");
            $("#city").val("北京市");
            $("#district").val("东城区");
        });
    </script>
</head>
<body>
    <select id="province">
        <option value="">请选择省份</option>
    </select>
    <select id="city">
        <option value="">请选择城市</option>
    </select>
    <select id="district">
        <option value="">请选择区/县</option>
    </select>
</body>
</html>

通过以上步骤，您就可以创建一个具有默认值的三级联动下拉菜单，帮助用户快速填写表单。希望本文能对您有所帮助！

-- 展开阅读全文 --