jq----省市选择

最新推荐文章于 2024-06-28 13:04:07 发布

liuyi0604

最新推荐文章于 2024-06-28 13:04:07 发布

阅读量645

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/liuyi0604/article/details/82316891

该博客介绍了如何使用jQuery（jq）库来实现网页上的省市联动选择功能，通过交互式的运行结果展示其实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="C:\Users\PC\Desktop\jquery-3.3.1.js"></script>
    <script>
        var CITYS = {"北京":["北京"],"上海":["上海"],"重庆":["重庆","江静"],"河北":["石家庄","张家口","承德"]};
        $(document).ready(function(){
            //初始化省的数据
            $.each(CITYS,function(keyPro,cityArray){
                var $pro = $("<option>"+keyPro+"</option>")
                $("#province").append($pro);
            });
             $("#province").triggerHandler('change');
            //给省添加change事件
            $("#province").on("change",function(){
                //拿到当前选择的省的名字
                //加载省对应的城市的信息
                var proName = $("#province option:selected").text();
                var cities = CITYS[proName];
                $("#city").empty();
                $.each(cities,function(i,value){
                    var $city = $("<option>"+value+"</option>")
                    $("#city").append($city);
                });

            });
        });
    </script>
</head>
<body>
    <select name="province" id="province">

    </select>
    <select name="city" id="city">

    </select>
</body>
</html>