javascript原生实现二级联动下拉菜单

三、 JS简单实现二级联动菜单

---

实现思路：

事件源头：城市对应的下拉列表

事件属性：选中的值改变 onchange

事件监听：根据选择城市展示县区信息

核心:监听函数的实现——>根据选中城市展示县区信息

1. json格式的数据准备：key-value

var city={

tj:[“北辰区”,“西青区”,“武清区”,“和平区”,“滨海新区”],

zy:[“红花港区”,“播州区”],

bj:[“海淀区”,“朝阳区”,“东城区”]

zz:[“二七区”,“金水区”,“中原区”],

}

2. 创建监听函数test();

（1）每次选择前先去清空县区下拉列表的内容 document.getElementBYId(“qx”).innerText=“”;

(2)获取城市的信息document.getElementBYId(“city”).value;

(3)获取区县的值（两种方法） city.[“tj”];

(4)遍历区县的信息for(inner in 区县的值qus)

a、为区县的值封装成文本节点

b、创建option标签对象 document.crementElement(“option”);

c、将文本节点追加到option中 option.appendChild(文本节点);

d、将option封装到select