JS-省市二级联动

最新推荐文章于 2019-12-23 17:47:54 发布

原创最新推荐文章于 2019-12-23 17:47:54 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS

学习笔记同时被 2 个专栏收录

25 篇文章

订阅专栏

前端

11 篇文章

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        <option value="0">北京</option>
        <option value="1">河北</option>
        <option value="2">山东</option>
        <option value="3">江苏</option>
        * */

        //定义数组存储市区的数据
        var arr0 = ["海淀" ,"昌平" ,"顺义" , "通州"];
        var arr1 = ["邯郸" ,"唐山" ,"石家庄" , "廊坊"];
        var arr2 = ["日照" ,"青岛" ,"烟台" , "济南"];
        var arr3 = ["无锡" ,"南京" ,"徐州" , "苏州"];
        var arr  = [ arr0 , arr1, arr2 , arr3  ];//二维数组

        //onchange 改变事件 一般下拉框使用 只有在下拉框的选项中发生变化 才会触发
        function selectCity(){
            //2.获得当前选择省的value值  确定了省份
            var proVal = document.getElementById("provinceId").value;
            //alert(proVal);
            var cityArr = arr[proVal];
            //alert(cityArr);

            //添加数据之间 将数据恢复
            document.getElementById("cityId").innerHTML="<option value=\"\">‐‐请选择市‐‐</option>";
            //遍历市区的数据 往下拉框中添加
            for(var i = 0 ; i<cityArr.length ; i++){
                //获得市区的下拉框对象 往内部添加内容
                //+= 表示追加
                document.getElementById("cityId").innerHTML += "<option>"+cityArr[i]+"</option>";
            }

        }
    </script>
</head>
<body>
    <select id="provinceId" onchange="selectCity()" >
        <option>‐请选择‐</option>
        <option value="0">北京</option>
        <option value="1">河北</option>
        <option value="2">山东</option>
        <option value="3">江苏</option>
    </select>
    <select id="cityId">
        <option value="">‐‐请选择市‐‐</option>
    </select>


</body>
</html>