js简单省市联动

js学习简单的省市联动，代码注释的很清楚了
思路:
1.省用数组存数据,市用二维数组存数据
2.初始化数据，给省,市添加Options数据
3.联动添加onchange事件

代码实现如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js省市联动</title>
    </head>
    <body>

        <form action="">
            <!--监听change事件-->
            选择省:<select id="province" onchange="changeCity(this.selectedIndex)"></select>
            选择市:<select id="city"></select>

        </form>

        <script type="text/javascript">

              var arr_provinces = ["江苏省","广东省","湖北省","福建省"];

              var arr_citys = [

                   ["南京市","无锡市","扬州市","苏州市"],

                   ["湛江市","珠海市","中山市","佛山市"],

                   ["武汉市","黄冈市","仙桃市","鄂州市"],

                   ["厦门市","福州市","泉州市","漳州市"]
              ];

                //拿到控件  
             var province = document.getElementById("province");
             var city = document.getElementById("city");

             //给select 初始化数据 
             province.onload = init(); //加载完毕初始化数据

             //初始化数据 
             function init(){
                //给省初始化数据
                //给options 的长度
                province.options.length = arr_provinces.length;

                //赋值
                for(var i = 0 ; i < arr_provinces.length ; i++){

                    //显示文本
                    province.options[i].text = arr_provinces[i];

                    //属性的值
                    province.options[i].value = arr_provinces[i];
                }

                //设置默认的选项
                var position = 0;
                province.selectedIndex = position;

                //给城市里面添加数据 
                changeCity(position)

             }

             //城市的数据
            function changeCity(index){

                //拿到对应的 城市数据
                var citys = arr_citys[index];
                //设置options 的长度属性
                city.options.length = citys.length;
                    //赋值
                for(var i = 0 ; i < citys.length; i++){
                    //显示文本
                    city.options[i].text = citys[i];
                    //属性的值
                    city.options[i].value = citys[i];
                }
                city.selectedIndex = 0 ;
            }
        </script>
    </body>
</html>

js简单省市联动

js简单省市联动

猜你喜欢