jQuery实现省市级联

最新推荐文章于 2024-06-28 23:39:09 发布

逗比程序猿^_^

最新推荐文章于 2024-06-28 23:39:09 发布

阅读量1.1k

点赞数

分类专栏：小练习题

本文链接：https://blog.csdn.net/qq_45085954/article/details/100623318

版权

小练习题专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市级联</title>
    <script src="js/jquery-1.12.4.js"></script>

</head>
<body>

    <select id="prov">
        <option>---请选择---</option>
    </select>省
    <select id="city">
        <option>---请选择---</option>
    </select>市


    <script type="text/javascript">
        var cities = new Array();
        cities["河北"] = ["石家庄", "保定", "秦皇岛", "张家口"];
        cities["河南"] = ["郑州", "平顶山", "洛阳", "安阳"];
        cities["湖南"] = ["长沙", "岳阳", "郴州"];
        cities["湖北"] = ["武汉", "仙桃", "襄樊"];

        for(var key in cities){
            //alert(key)
            $("#prov").append("<option value='"+ key +"'>"+key+"</option>");
        }
        //添加change，onchang
        $("#prov").change(function () {
            //alert($("#prov").val());
            //每次把上一次的结果清空
            $("#city").empty();
            var pro = $("#prov").val();
            var city = cities[pro];
            for (var i = 0; i < city.length; i++) {
                $("#city").append("<option value='"+city[i]+"'>"+city[i]+"</option>")
            }
        });


    </script>
</body>
</html>

逗比程序猿^_^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现省市级联

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>省市级联</title> <script src="js/jquery-1.12.4.js"></script></head&gt...
复制链接

扫一扫

专栏目录