tips04-省市区的三级联动

html dom select 对象的各种属性

　　 1) selectedIndex 可以设置或返回列表中被选选项的索引号;

　　2)如果可以多选(<select multiple="multiple">),返回被选第一项的索引;

　　3)　　options[] 并非一个简单的集合,它也可以

　　　　通过 select.options.length = 1; 来设置显示的选项

　　

//实现逻辑: 省 /市 /县 的三级联动

<body>
    <p>
        请选择地区：
        <select name="" id="proc">
            <option value="">--请选择省--</option>
        </select>
        <select name="" id="city">
            <option value="">--请选择市--</option>
        </select>
        <select name="" id="dist">
            <option value="">--请选择区--</option>
        </select>
    </p>

    <body>

        <script>
            //声明省
            var oProc = ["安徽", "上海", "山东"]; //直接声明array
            //声明市
            var oCity = [
                ["合肥", "淮南", "芜湖"],
                ["浦东", "闵行", "浦西"],
                ["济南", "青岛", "枣庄"]
            ];
            //声明区
            var oDist = [
                [
                    ["政务区", "庐阳区", "蜀山区"],
                    ["田家庵区", "大通区", "九龙岗区"],
                    ["镜湖区", "鸠江区", "三山区"]
                ],
                [
                    ["浦东1", "浦东2", "浦东3"],
                    ["闵行1", "闵行2", "闵行3"],
                    ["浦西1", "浦西", "浦西3"]
                ],
                [
                    ["历下区", "天桥区", "长清区"],
                    ["市南区", "市北区", "李沧区"],
                    ["薛城区", "市中区", "峄城区"]
                ]
            ];

            //   目标：实现三级联动 
            ///  分析 一下 
            // 1.    一进来应该加载所有的省的内容  
            // 2.     选择了省以后 ，动态加载当前省下面的所有的城市 
            // 3.    选择了城市以后，动态去加载当前城市下面所有的县

            var proc = document.querySelector('#proc');
            var city = document.querySelector('#city');
            var dist = document.querySelector('#dist');


            // 1.    一进来应该加载所有的省的内容  
            for (var i = 0; i < oProc.length; i++) {
                var po = document.createElement('option');
                po.innerText = oProc[i];
                proc.appendChild(po);
            }

            //2.  选择省之后, 动态加载当前省下面的所有市
            proc.onchange = function () {
                //判断如果没有选中, 代码不执行
                if(proc.options.selectedIndex == 0) {
                    city.options.length = 1;
                    dist.options.length = 1;
                    return false;
                }
                city.options.length = 1;
                dist.options.length = 1;

                var select = proc.options.selectedIndex; //这个索引从1开始
                console.log(select);
                var index = select - 1;
                    //生成所有市
                for (var j = 0; j < oCity[index].length; j++) {
                    var co = document.createElement('option');
                    co.innerText = oCity[index][j];
                    city.appendChild(co);
                }
            }

            //3.  选择市之后, 动态生成所有区
            city.onchange = function() {
                if(city.options.selectedIndex == 0) {
                    dist.options.lenth =1;
                }

                dist.options.length = 1;
                var select = city.options.selectedIndex; //这个索引从1开始
                var pSelect = proc.options.selectedIndex; //拿到省的选中索引

                console.log(select);
                var index = select - 1;
                var pIndex = pSelect-1;
                    //生成所有市
                for (var j = 0; j < oDist[index].length; j++) {
                    var dio = document.createElement('option');
                    dio.innerText = oDist[pIndex][index][j];
                    dist.appendChild(dio);
                }
            }

 

posted @ 2018-12-18 20:45  noraZhang  阅读(193)  评论(0)  编辑  收藏  举报