js实现省市区(县)三级联动
实现思路:根据上级,带出下级所有信息。即:前面确定,后面跟着确定。
HTML部分:
省<select name="" id="sheng">
<option>---请选择所在省---</option>
</select>
市<select name="" id="shi">
<option>---请选择所在市---</option>
</select>
区<select name="" id="qu">
<option>---请选择所在区---</option>
</select>
JS部分:
<script>
var shengList = [
{
name:"山东省",
shi:[
{
name:"烟台市",
qu:["芝罘区","莱山区","高新区"]
},
{
name:"威海市",
qu:["环翠区","文登区","高新技术产业开发区"]
},
{
name:"济南市",
qu:["历下区","市中区","天桥区"]
}
]
},{
name:"陕西省",
shi:[
{
name:"西安市",
qu:["新城区","灞桥区","未央区"]
},
{
name:"渭南市",
qu:["临渭区","华州区","经开区"]
},{
name:"咸阳市",
qu:["秦都区","杨凌区","渭城区"]
}
]
},{
name:"河北省",
shi:[
{
name:"邯郸市",
qu:["邯山区","丛台区","永年区"]
},{
name:"廊坊市",
qu:["安次区","广阳区","香河县"]
},{
name:"沧州市",
qu:["新华区","运河区","开发区"]
}
]
}
]
//查找节点 通过id获取
var sheng = document.getElementById("sheng")
for ( var i = 0; i < shengList.length; i++ ) {
//创建节点
var shengOption = document.createElement("option")
//追加内容 可以解析标签
shengOption.innerHTML = shengList[i].name
shengOption.value = i
sheng.appendChild(shengOption)
}
sheng.onchange = function () {
var shiList = shengList[this.value].shi
var shi = document.getElementById("shi")
shi.innerHTML = "<option>===请选择===</option>"
var qu = document.getElementById("qu")
qu.innerHTML = "<option>===请选择===</option>"
for ( var i = 0; i < shiList.length; i++ ) {
var shiOption = document.createElement("option")
shiOption.innerHTML = shiList[i].name
shiOption.value = i
shi.appendChild(shiOption)
}
}
var shi = document.getElementById("shi")
shi.onchange = function () {
//省下标
var shengIndex = document.getElementById("sheng").value
var shiIndex = this.value
var quList = shengList[shengIndex].shi[shiIndex].qu
var qu = document.getElementById("qu")
qu.innerHTML = "<option>===请选择===</option>"
for ( var i = 0; i<quList.length; i++ ) {
var quOption = document.createElement("option")
quOption.innerHTML = quList[i]
qu.appendChild(quOption)
}
}
</script>