【实践】用for-in 循环实现三联联动

时间：2022-01-20 22:17:49

之前用jq 做过一次三联联动以及四联联动

现在为了更好地了解对象用js的原生方式做了一次

*本节要点方法：

 obj.selectedIndex  获取下拉列表选中的option 的索引

 obj.options[obj.selectedIndex].text  获取对应下标option的文本值

 obj.onchange =function(){}  下拉列表选中option更改事件

 
知道这些方法之后我们就可以开始动手了

下面是html代码

<select id="provin">

      <option>请选择省</option>

    </select>

    <select id="city">

      <option>请选择市</option>

    </select>

    <select id="area">

      <option>请选择区/县</option>

    </select>

js代码：

注释应该能够很好地说明了

<script type="text/javascript">

     window.onload = function(){

         //建一个 data对象此对象里面有三个省名的属性

         //各个省名的属性又有几个对应市名的属性

         //各个市名属性的值包含着对应的区/县名

         var data = {

            广东省:{

                  广州市:"荔湾区,越秀区,海珠区,天河区,芳村区,白云区,黄埔区,番禺市,花都市,增城市,从化市",

                  深圳市:"罗湖区,福田区,南山区,宝安区,龙岗区,盐田区",

                  珠海市:"香洲区,斗门区,金湾区",

                  湛江市:"赤坎区,霞山区,坡头区,麻章区,竹溪县,徐闻县,廉江市,雷州市,吴川市"

            },

            河北省:{

              石家庄市:"深泽县,无极县,赵县",

              唐山市:"玉田县,遵化市,迁安市"

          },

           山东省:{

              济南市:"历下区,市中区,槐荫区,天桥区,历城区,长清县,平阴县,济阳县,商河县,章丘市",

              青岛市:"市南区,市北区,四方区,黄岛区,崂山区,李沧区,城阳区"

          }

         }

         var provin = document.getElementById('provin');

         var city = document.getElementById('city');

         var area = document.getElementById('area');

         var provinDefaultTxt = provin.options[0].text;

         var cityDefaultTxt = city.options[0].text;

         var areaDefaultTxt = area.options[0].text;

         //获取三个下拉列表元素以及他们的默认值

        //开始循环遍历对象data

         for(key in data){

             var newElemForPro = document.createElement("option");

             var newProElemTxt = document.createTextNode(key);

             newElemForPro.setAttribute("value",key);

             newElemForPro.appendChild(newProElemTxt);

             provin.appendChild(newElemForPro);

             //把遍历出来的省份名添加到第一个下拉列表中

            //当省份下拉列表变化时

            provin.onchange = function(){

                //获取选中option的索引

                var provinSelectedIndex = this.selectedIndex;

                //通过选中option的索引找到 option的文本内容

                var provinSelectedText = this.options[provinSelectedIndex].text;

                //在data数组里面找到对应的键 并将其值赋值给另外一个变量（通过键值对的形式返回出一个对象）

                var CityObject = data[provinSelectedText];

                //清空city下拉列表的内容

                city.options.length = 0;

                //如果选中了默认值其他两个下拉列表都会变为默认值

                if (provinSelectedText == provinDefaultTxt) {

                   area.options.length = 0;

                   var cityNewElem = document.createElement("option");

                   var cityTxt = document.createTextNode(cityDefaultTxt);

                   var areaNewElem = document.createElement("option");

                   var areaTxt = document.createTextNode(areaDefaultTxt);

                   cityNewElem.appendChild(cityTxt);

                   city.appendChild(cityNewElem);

                   areaNewElem.appendChild(areaTxt);

                   area.appendChild(areaNewElem);

                }

                //把对应省份的市名对象遍历一次

                for(cityKey in CityObject){

                    var CityElem = document.createElement("option");

                    var CityElemTxt = document.createTextNode(cityKey);

                    CityElem.appendChild(CityElemTxt);

                    CityElem.setAttribute("value",cityKey);

                    city.appendChild(CityElem);

                    //把遍历出来的城市名添加到第二个下拉列表中

                }

                //然后这里也是一样 获取选中的城市名索引

                var citySelectedIndex = city.selectedIndex;

                //根据这个索引找到选中 option的文本值

                var citySelectedText = city.options[citySelectedIndex].text;

                //通过这个市名的值找到对应的对象然后赋值给一个变量

                //因为区/县名是一个字符串所以用 split() 方法将他们以逗号分隔变成一个数组

                var areaObject = CityObject[citySelectedText].split(",");

                //将第三个下拉框清空

                area.options.length = 0;

                //运用闭包模拟块级作用域 循环中的变量不会永远保存

                (function(){

                    //遍历区/县数组添加到第三个下拉框中

                    for(var i = 0; i < areaObject.length; i++){

                        var areaElem = document.createElement("option");

                        var areaElemTxt = document.createTextNode(areaObject[i]);

                        areaElem.appendChild(areaElemTxt);

                        areaElem.setAttribute("value",areaObject[i]);

                        area.appendChild(areaElem);

                    }

                })();

                //当市名下列列表发生变化的时候

                city.onchange = function(){

                    //此时 citySelectedIndex 和 citySelectedText 变量已存在

                    //将他们直接获取新值就可以了不用再重新声明

                    citySelectedIndex = city.selectedIndex;

                    citySelectedText = city.options[citySelectedIndex].text;

                    //清空区/县下拉列表内容

                    area.options.length = 0;

                    //根据选中的市名取出对应的区/县名

                    //同理调用split() 方法变成数组

                    areaObject = CityObject[citySelectedText].split(",");

                    (function(){

                        //遍历数组 添加到区/县下拉列表中

                        for(var i = 0; i < areaObject.length; i++){

                            var areaElem = document.createElement("option");

                            var areaElemTxt = document.createTextNode(areaObject[i]);

                            areaElem.appendChild(areaElemTxt);

                            areaElem.setAttribute("value",areaObject[i]);

                            area.appendChild(areaElem);

                        }

                    })();

                }

            }

         }

     }

    </script>

 还要说一下以前jq的联动笔记说data是数组其实那时候理解得不够清楚 刚好这几天看高程深刻理解了对象、构造函数以及闭包的原理后才有了更深刻的理解

相关文章