实现三级联动的主要代码已贴,另外的data数据可自己网上查找
HTML实现代码 :
省:<select id="provice">
<option>--请选择--</option>
</select>
市:<select id="city">
<option>--请选择--</option>
</select>
区:<select id="area">
<option>--请选择--</option>
</select>
js的实现代码:
var provice = document.getElementById("provice");
var citys = document.getElementById("city");
var areas = document.getElementById('area');
var cities;//定义一个变量存放市
var newarea; //定义一个变量存放区
var data = city[0];
for(var i in data){
var options = new Option(data[i].name,i);//实例化,data[i].name为省名,value为值
provice.appendChild(options); //动态添加
console.log(data[i].name,i)
}
provice.onchange = function () {
citys.options.length = 1;//城市选择的长度变为1个
var provices = this.value;//将当前省份的值提取出来
cities = data[provices].child;//将市提取出来
for(var j in cities){
var cityselect = new Option(cities[j].name, j);
citys.appendChild(cityselect);//将市动态添加到下拉框中
}
}
citys.onchange = function () {
areas.options.length = 0;//区的选择长度变为0
var city = this.value; //将当前市的值提取出来
newarea = cities[city].child; //将区提取出来
for(var k in newarea){ //遍历区
var areaselect = new Option(newarea[k], k);
areas.appendChild(areaselect);
}
}