JS实现三级联动
题目阐述
- 题目：三级联动
- 通过改动对省级下拉列表的选项值，
- 同时改动对市级下拉列表的选项值和区级的下拉列表选项值，
- 并且每个选项值都是符合上一级选项值管辖范围的。
- 效果如下图：
思路解析
三级联动
- 将封装好的数据加入到省级下拉列表的项中
- 通过事件绑定，当省级项有变动，修改市级下拉列表项，
- 同时，区级下拉列表项数据也对应修改
代码示例
// 三级联动
<body>
省：<select id="one">
<option value="-1">请选择---</option>
</select>
市：<select id="two">
<option value="-1">请选择---</option>
</select>
区：<select id="three">
<option value="-1">请选择---</option>
</select>
<script>
var item = [{
"name": "福建省",
"child": [{
"name": "福州市",
"child": ["晋安区", "台江区"]
}, {
"name": "厦门市",
"child": ["思明区", "海沧区"]
}]
},
{
"name": "广东省",
"child": [{
"name": "广州市",
"child": ["天河区", "番禺区"]
}, {
"name": "深圳市",
"child": ["深圳1区", "深圳2区"]
}]
}]
//简单的三级联动
var shen = document.getElementById("one");
var shi = document.getElementById("two");
var qu = document.getElementById("three");
var op = document.createElement("option");
var flag = 0;//标记省级位置
for (var i in item) {
// var opDate = op.cloneNode(true);
// opDate.innerHTML = item[i].name;
// shen.appendChild(opDate);
var opDate = new Option(item[i].name, i);
shen.appendChild(opDate);
}
//省级下拉列表改变触发事件
shen.onchange = function () {
//清除列表中的选项值
shi.options.length = 0;
qu.options.length = 0;
//未选中任何省时，市级和区级都是待选状态
if (this.value == -1) {
var opti = "<option>请选择---</option>";
shi.innerHTML = opti;
qu.innerHTML = opti;
return;
}
//添加省级对象下的市级对象
for (var i in item[this.value].child) {
var opDate = new Option(item[this.value].child[i].name, i);
shi.appendChild(opDate);
}
flag = this.value;
//市级下拉列表改变触发事件
//清除列表中的选项值
qu.options.length = 0;
//添加省级对象下市级对象下的区
for (var i in item[flag].child[this.value].child) {
var opDate = new Option(item[flag].child[this.value].child[i]);
qu.appendChild(opDate);
}
}
总结
数据是提前封装好的，如果地址数据是一个规律字符串；第一步要做的就是分解该字符串，让你更容易的获取到对应数据。
