省市二级显示jquery

最新推荐文章于 2023-07-25 20:38:09 发布

小小乐112

最新推荐文章于 2023-07-25 20:38:09 发布

阅读量289

点赞数

分类专栏： html5 文章标签： jquery 分页

本文链接：https://blog.csdn.net/wkakasa/article/details/50977445

版权

html5 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>省市二级联动、分页</title>
    <style></style>
    <script src="js/jquery-2.2.2.js"></script>
    <script>
        var pros=[
            {'name':'jiangsu','name_cn':'江苏','cities':['苏州','无锡']},
            {'name':'gongdong','name_cn':'广东','cities':['广州','深圳']},
            {'name':'henan','name_cn':'河南','cities':['濮阳','安阳']},
            {'name':'hebei','name_cn':'河北','cities':['北京','邯郸']},
            {'name':'fujian','name_cn':'福建','cities':['泉州','厦门']}
        ]
        $(function(){
            for(var i=0;i<pros.length;i++){
            //自动加入option
                var a=$("<option>");
                a.html(pros[i].name_cn);
                a.appendTo('#pro');
            }
            $("#pro").change(function(){
                var xz=$("#pro option:selected").index();
                var ci= $("#city");
                ci.empty();
                for(var j=0;j<pros[xz].cities.length;j++){
                    var b=$("<option>");
                    b.html(pros[xz].cities[j]);
                    b.appendTo('#city');
                }
            });
        })

    </script>
</head>
<body>
<select name="province" id="pro"></select>
<select name="city" id="city"></select>
</body>
</html>