Html 简单的省市联动

最新推荐文章于 2021-06-15 23:34:14 发布

CoderJu

最新推荐文章于 2021-06-15 23:34:14 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html select 省市联动

本文为博主原创文章，转载请注明出处！谢谢！！！

本文链接：https://blog.youkuaiyun.com/system_obj/article/details/48770773

HTML 专栏收录该内容

6 篇文章

订阅专栏

这是一个基于html的简单的省市联动功能代码如下：

<html>
 <head>
  <title>Document</title>
 </head>
 <body>
    <select id = "province" onchange="showCity(this.value)">
        <option >--请选择--</option>
        <option value ="安徽">安徽</option>
        <option value ="浙江">浙江</option>
        <option value="江苏">江苏</option>
        <option value="湖北">湖北</option>
    </select>
    <select id="city">
    </select>
 </body>
 <script type ="text/javascript">
            var arr= new Array(4);
            arr[0]=["安徽","合肥","芜湖","安庆","铜陵"];
            arr[1]=["浙江","杭州","宁波","温州","嘉兴","湖州"];
            arr[2]=["江苏","南京","苏州","无锡"];
            arr[3]=["湖北","武汉","十堰","荆州"];

        function showCity(value)
        {
            var city1 = document.getElementById("city");
            var opts = city1.getElementsByTagName("option");
            for (var a = 0 ;a<opts.length ;a++ )
            {
                var opt = opts[a];
                city1.removeChild(opt);
                a--;

            }

            for (var i = 0;i<arr.length ;i++ )
            {
                var arr1=arr[i];
                var fristvalue = arr1[0];
                if (fristvalue==value)
                {
                    for (var j=1;j<arr1.length ;j++ )
                    {
                        var value1=arr1[j];
                        //alert(value1);
                        var option1 = document.createElement("option");
                        var text1 = document.createTextNode(value1);
                        option1.appendChild(text1);
                        city1.appendChild(option1);
                    }
                }
            }

        }
 </script>
</html>