JavaScript的三级联动(省 市 县)

<!DOCTYPE html>
<html>
  <head>
    <title>SanJiLianDong.html</title>

  </head>

  <script type="text/javascript">
        //按照省份的下拉列表的顺序定义二维数组  将城市列表对应到省份下
        var city=[
            ["杭州市","温州市","宁波市","绍兴市"],//浙江省
            ["济南市","青岛市","济宁市","潍坊市"],//山东省
            ["广州市","潮阳","澄海","潮州"],//广东省
            ["兰州市","白银","敦煌","定西"]//甘肃省
        ];

        //县区数组
        var qu=[
            [
                    ["杭州一区","杭州二区"],
                    ["温州一区","温州二区"],
                    ["宁波一区","宁波二区"],
                    ["绍兴一区","绍兴二区"]
            ],

            [
                    ["济南一区","济南二区"],
                    ["青岛一区","青岛二区"],
                    ["济宁一区","济宁二区"],
                    ["潍坊一区","潍坊二区"],
            ],

            [
                    ["广州一区","广州二区"],
                    ["潮阳一区","潮阳二区"],
                    ["澄海一区","澄海二区"],
                    ["潮州一区","潮州二区"],
            ],

            [
                    ["兰州一区","兰州二区"],
                    ["白银一区","白银二区"],
                    ["敦煌一区","敦煌二区"],
                    ["定西一区","定西二区"],
            ]

        ];


        function getCity(){
            //获得省份和城市的下拉列表
            var sltProvince = document.forms["theform"].province;

            var sltCity = document.forms[0].city;

            //将对应的城市添加到省份下拉列表之下
            var provinceCity= city[sltProvince.selectedIndex-1];

             //将城市下拉列表清空
            sltCity.length = 1;

             //将provinceCity 填充到city之下
             for(var i = 0;i<provinceCity.length;i++){
                //创建新的option  添加到city之下
                sltCity[i+1] = new Option(provinceCity[i],provinceCity[i]);
             }

        }

        function getQu(){

            //获得省份,城市,县区的下拉列表
            var sltProvince = document.forms["theform"].province;           
            var sltCity = document.forms[0].city;   
            var sltQu = document.forms[0].qu;

            //将对应的县区添加到城市下拉列表之下
            var cityQu = qu[sltProvince.selectedIndex-1][sltCity.selectedIndex-1];

            //将县区下拉列表清空
            sltQu.length = 1;

            //将cityQu 填充到qu之下
            for(var i = 0;i<cityQu.length;i++){
                //创建新的option  添加到qu之下
                sltQu[i+1] = new Option(cityQu[i],cityQu[i]);
             }
        }


    </script>



  <body>
    <form action="" name="theform">
        <select name="province" onchange="getCity()">
            <option value = "0">请选择所在的省份</option>
            <option value="1">浙江省</option>
            <option value="2">山东省</option>
            <option value="3">广东省</option> 
             <option value="4">甘肃省</option> 
        </select>

        <select id="city" onchange="getQu()">
            <option value = "0">请选择所在的城市</option>
        </select>

        <select name = "qu">
            <option value = "0">请选择所在的县区</option>
        </select>

    </form>

  </body>
</html>

运行结果:
这里写图片描述

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值