JavaScript的三级联动（省市县）

最新推荐文章于 2024-04-26 20:21:12 发布

喏喏啦

最新推荐文章于 2024-04-26 20:21:12 发布

阅读量1.5k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 三级联动省市县

本文链接：https://blog.csdn.net/Elenal/article/details/51493510

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>