| 三级城市联动的实现 | 您所在的位置：网站首页 › js实现城市三级联动的方法 › 三级城市联动的实现 |
|
三级城市联动的实现
数据：
// 城市列表
var data = [
{
"code": "110000",
"name": "北京市",
"parent": "100000",
"children": [
{
"code": "110101",
"name": "东城区",
"parent": "110100",
"children": null
},
{
"code": "110102",
"name": "西城区",
"parent": "110100",
"children": null
},
{
"code": "110105",
"name": "朝阳区",
"parent": "110100",
"children": [
{
"code": "11010501",
"name": "朝阳区111",
"parent": "110105",
"children": null
}
]
},
]
}
]
1.遍历省级数据
我们可以通过以下几步来遍历省级数据： 1.导入数据 2.在body标签创建三个下拉框 3.分别获取这三个下拉框 4.遍历数据 5.添加到省级下拉框中 2.二级联动的实现二级联动在遍历省级基础上又多了些步骤 具体实现步骤如下： 1.创建一个数组，用于存放市级数据 2.给省级下拉框绑定事件 3.遍历数据，将遍历的数据与当前的省作比较，将相对应的市级数据存放到数组中 4.遍历市级数据 注意： 在省级数据发生变化时，要清空市级的数据，不然市级的数据会叠加在一起，所以要加上这句： shi.innerHTML="---请选择---" 3.三级联动的实现三级联动与二级联动的实现几乎一样，注意数据发生变化时所要清空相应的数据即可。 4.最终代码实现如下： Document 省： ---请选择--- 市： ---请选择--- 区： ---请选择--- // 3.分别获取这三个下拉框 var sheng = document.getElementById('sheng') console.log(sheng) var shi = document.getElementById('shi') var qu = document.getElementById('qu') var frag = document.createDocumentFragment() console.log(frag) // 4.遍历数据 for (var i = 0; i //清空市级与区级中的数据，防止重复 shi.innerHTML = '---请选择---' qu.innerHTML = '---请选择---' // 3.遍历数据，将遍历的数据与当前的省作比较，将相对应的市级数据存放到数组中 // 4.遍历数组，将数组中的数据添加到市级下拉框中 for (var i = 0; i // 将市级数据存放到数组中 shiArr = data[i].children // 遍历数组，将数组中的数据添加到市级下拉框中 break } } // 4.遍历市级数据 for (var j = 0; j qu.innerHTML = '---请选择---' for (var i = 0; i quArr = shiArr[i].children break } } for (var j = 0; j |
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 |