薛乎乎~ 2024-04-26 21:26 采纳率: 87.5%
浏览 5
已结题

利用jquery实现省市联动

如何利用jQuery是下列代码中的市显示

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>省市二级联动菜单</title>
    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // 创建数组
            var addrs = [
                ["吉林", "长春", "吉林", "四平", "松原"],
                ["黑龙江", "哈尔滨", "北安", "大庆", "大兴安岭"],
                ["辽宁", "沈阳", "鞍山", "本溪", "朝阳", "大连"]
            ];
 
            // 初始化函数
            function initProvinces() {
                // 循环添加省的信息
                $.each(addrs, function (_, province) {
                    $("<option>").val(province[0]).text(province[0]).appendTo("#pro");
                });
 
                // 设置默认选中项为"吉林省"
                $("#pro option:contains('吉林省')").prop("selected", true);
 
                // 获取省的值并初始化城市选项
                initCities();
            }
 
            // 初始化城市
            function initCities() {
                var province = $("#pro").val();
 
                // 清空城市选项
                $("#city").empty();
 
                // 如果有匹配的省份，填充城市选项
                if (province) {
                    $.each(addrs, function (_, arr) {
                        if (arr[0] === province) {
                            $.each(arr.slice(1), function (_, city) {
                                $("<option>").val(city).text(city).appendTo("#city");
                            });
                            return false; // 停止遍历数组
                        }
                    });
                } else {
                    $("<option>").val("").text("-请选择市-").appendTo("#city");
                }
            }
 
            // 获取城市
            function getCities() {
                initCities();
            }
 
            // 页面加载完成后执行初始化
            initProvinces();
        });
    </script>
</head>
<body>
    <select id="pro" onchange="getCities()"><option value="">-请选择省-</option></select>
    <select id="city"><option value="">-请选择市-</option></select>
</body>
</html>
  • 写回答

6条回答 默认 最新

  • 码农阿豪@新空间代码工作室 Java领域优质创作者 2024-04-26 21:26
    关注
    让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言
    问题：如何利用jQuery实现省市二级联动菜单？ 回答： 利用jQuery实现省市二级联动菜单，可以通过以下步骤：
    1. 创建一个数组，存储省市信息。
    2. 初始化省份选项。
    3. 根据省份选项，动态生成对应的城市选项。
    4. 在页面加载完成后，执行初始化函数。 以下是利用jQuery实现省市二级联动菜单的代码：
    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>省市二级联动菜单</title>
    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // 创建数组
            var addrs = [
                ["吉林", "长春", "吉林", "四平", "松原"],
                ["黑龙江", "哈尔滨", "北安", "大庆", "大兴安岭"],
                ["辽宁", "沈阳", "鞍山", "本溪", "朝阳", "大连"]
            ];
            // 初始化函数
            function initProvinces() {
                // 循环添加省的信息
                $.each(addrs, function (_, province) {
                    $('<option>').val(province[0]).text(province[0]).appendTo("#pro");
                });
                // 设置默认选中项为"吉林省"
                $("#pro option:contains('吉林省')").prop("selected", true);
                // 获取省的值并初始化城市选项
                initCities();
            }
            // 初始化城市
            function initCities() {
                var province = $("#pro").val();
                // 清空城市选项
                $("#city").empty();
                // 如果有匹配的省份，填充城市选项
                if (province) {
                    $.each(addrs, function (_, arr) {
                        if (arr[0] === province) {
                            $.each(arr.slice(1), function (_, city) {
                                $('<option>').val(city).text(city).appendTo("#city");
                            });
                            return false; // 停止遍历数组
                        }
                    });
                } else {
                    $('<option>').val("").text("-请选择市-").appendTo("#city");
                }
            }
            // 获取城市
            function getCities() {
                initCities();
            }
            // 页面加载完成后执行初始化
            initProvinces();
        });
    </script>
</head>
<body>
    <select id="pro" onchange="getCities()">
        <option value="">-请选择省-</option>
    </select>
    <select id="city">
        <option value="">-请选择市-</option>
    </select>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题？

问题事件

  • 系统已结题 5月17日
  • 已采纳回答 5月9日
  • 创建了问题 4月26日

悬赏问题

  • ¥15 mySQL5.7.34安装遇到的问题
  • ¥15 结构功能耦合指标计算
  • ¥20 visual studio中c语言用ODBC链接SQL SERVER
  • ¥50 AI大模型精调（百度千帆、飞浆）
  • ¥15 非科班怎么跑代码？如何导数据和调参
  • ¥15 福州市的全人群死因监测点死亡原因报表
  • ¥15 Altair EDEM中生成一个颗粒，并且各个方向没有初始速度
  • ¥15 系统2008r2 装机配置推荐一下
  • ¥15 悬赏Python-playwright部署在centos7上
  • ¥15 psoc creator软件有没有人能远程安装啊