<
三级联动demo
window.onload=function() {
//定义几个省市区的数据
varsheng_city = [
["陕西省"],
["江苏省"],
["山东省"]
];
varshi_city = [
["西安市", "咸阳市", "宝鸡市"],
["淮安市", "盐城市", "扬州市"],
["济南市", "德州市", "聊城市"]
];
varqu_city = [
[
["高新区", "长安区", "未央区"],
["秦都区", "咸阳区1", "咸阳区2"],
["金台区", "成仓区", "渭滨区"]
],
[
["淮安区1", "淮安区2", "淮安区3"],
["盐城区1", "盐城区2", "盐城区3"],
["扬州区1", "扬州区2", "扬州区3"]
],
[
["济南区1", "济南区2", "济南区3"],
["德州区1", "德州区2", "德州区3"],
["聊城区1", "聊城区2", "聊城区3"]
]
];
//动态创建dom元素 添加省级选项
varsheng = document.getElementById("sheng");
for (vari = 0; i < sheng_city.length; i++) {
varoption = new Option(sheng_city[i], i);
sheng.appendChild(option);
}
//添加省文本改变事件
varshi = document.getElementById("shi");
vars_index = 0;//定义变量索引
sheng.onchange = function () {
shi.options.length = 1;
qu.options.length = 1;
s_index = this.value;
for (vari = 0; i < shi_city.length; i++) {
varoption = new Option(shi_city[s_index][i], i);
shi.appendChild(option);
}
};
//添加市文本改变事件
varqu = document.getElementById("qu");
varq_index = 0;
shi.onchange = function () {
qu.options.length=1;
q_index = this.value;
for (vari = 0; i < qu_city.length; i++) {
varoption = new Option(qu_city[s_index][q_index][i], i);
qu.appendChild(option);
}
}
}
省:
---请选择---
市:
---请选择---
区:
---请选择---
>
