三级联动

时间 2019-11-21
标签三级联动繁體版
原文原文链接
 <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. 选择了城市之后，动态去加载当前城市下面全部的县



            // 1. 一进来应该加载全部的省的内容 
            var proc = document.getElementById('proc'); var city = document.getElementById('city'); var dist = document.getElementById('dist'); for (var i = 0; i < oProc.length; i++) { var op = document.createElement('option'); op.innerText = oProc[i]; proc.appendChild(op); } // 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 cop = document.createElement('option'); cop.innerText = oCity[index][j]; city.appendChild(cop); } } // 3. 选择了城市之后，动态去加载当前城市下面全部的县
 city.onchange = function () { if (city.options.selectedIndex == 0) { dist.options.length = 1; return false; } dist.options.length = 1; var Cselct = city.options.selectedIndex; //这个是是拿到的城市选中
 console.log(Cselct) // 的那个

                var Sselct = proc.options.selectedIndex // 拿到选中的省的索引 

                for (var i = 0; i < oDist[Sselct - 1][Cselct - 1].length; i++) { var dop = document.createElement('option'); dop.innerText = oDist[Sselct - 1][Cselct - 1][i]; dist.appendChild(dop); } } </script>