jquery实现省市二级联动

最新推荐文章于 2024-10-01 16:53:25 发布

choosezzz

最新推荐文章于 2024-10-01 16:53:25 发布

阅读量1.4w

点赞数 5

分类专栏： web前端文章标签： jquery html js

本文链接：https://blog.csdn.net/dingse/article/details/78764636

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <title>省市联动</title>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript">
        var pro=["河南","山东","黑龙江"];
        var city=[["郑州","开封","新政","濮阳","平顶山","洛阳","三门峡"],["济南","日照","烟台","德州","聊城"],["哈尔滨","齐齐哈尔","佳木斯","牡丹江"]];
        $(function(){
            //初始化省份下拉列表
            for(var i=0;i<pro.length;i++){
                $("#province").append($("<option></option>").val(i+1).html(pro[i]));
            }
            //为省份下拉列表绑定change事件
            $("#province").change(function(){
                var index=$(this).val()-1;//获取当前省的下标
                $("#city").prop("length",1);//清空原有的数据
                for(var i=0;i<city[index].length;i++){//重新为市赋值
                    $("#city").append($("<option>").val(i+1).html(city[index][i]));
                }
            });
        })
    </script>
</head>
<body>
    <div style="height: 200px;width: 300px;background-color: aquamarine;text-align: center" id="div1">
        <select id="province">
            <option value="0" selected>-请选择-</option>
        </select>省
        <select id="city">
            <option value="0" selected>-请选择-</option>
        </select>市
    </div>
</body>
</html>