二级联动--js

在html部分只写两个select标签 option标签将用js的方法写入

onchange:内容发生改变事件  用于select下拉菜单中后的内容发生改变时候的触发

核心部分就是js里面的内容：

创建一个对象data来存储数据

data = {"河北省":["邯郸","廊坊"],"北京":["海淀","朝阳"],"陕西":["延安","西安"]}

首先通过for循环来添加第一级里面的内容（province）

var pro = document.getElementById("province");
for(var i in data){
    var option_pro = document.createElement("option");  //创建option标签
    oprtion_pro.innerHTML = i;                       //将data里面的对象插入到id位置
    pro.appendChild(option_pro);                       //将元素添加到option里面
}

createElement():可创建元素节点此方法返回一个Element对象。

appendChild():可向节点的子节点列表的末尾添加新的子节点。

innerHTML在JS是双向功能：获取对象内容 或 向对象插入内容

重中之重 func1():

向第二级标签中添加元素

1.获取data对象中的province元素：

var choice = (self.options[self.selectedIndex]).innerHTML;

selectedIndex 获取data对象中的索引；

2.通过for循环将city元素插入：

var city = document.getElementById("city"); 
for (var i in data[choice]){
            var option_city = document.createElement("option");
            option_city.innerHTML = data[choice][i];
            city.appendChild(option_city);
        }

此方法与之前插入的第一级的元素相同

到这里一个二级联动基本就搞定了然而bug却没有解决

我们想要的结果时只有陕西所对应的城市但是北京的也出现了

所以接下来要去掉上一次操作的“残害”

有两种方法：

1.利用removeChildren方法：通过for循环遍历city.Children来删除city.Children

var options = city.children;
for (var k=0; k

removeChild():指定元素的某个指定的子节点。

注：k--每次删除的都是第一个元素，options的长度在发生变化所以k--；

2.DHTML有一种暴力的方法

city.options.length = 0;

就可以解决这一问题

bug解决后：

搞定啦！

总结：1.用到用js的形式写html的内容

           2.HTML DOM的使用（createElement(),appenfChild(),removeChild(),selectedIndex()）方法.

           3.解决所谓的残骸问题.