前端之家收集整理的这篇文章主要介绍了
原生js三级联动的简单实现代码，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
实例如下：
三级联动
<
Meta charset="utf-8">
<script>
window.onload = function() {
console.log(city)
var oDiv = document.getElementById("div");
var sheng = document.createElement("select");
var shi = document.createElement("select");
var qu = document.createElement("select");
oDiv.appendChild(sheng);
oDiv.appendChild(shi);
oDiv.appendChild(qu);
sheng.options[0] = new Option("请选择省","-1");
shi.options[0] = new Option("请选择市","-1");
qu.options[0] = new Option("请选择区","-1");
//创建省市区完毕
//循环第一步
for (var i = 0; i < city.length; i++) {
sheng.options[sheng.length] = new Option(city[i].name,i);
sheng.onchange = function() {
//恢复默认选项
//shi.options[0].selected = true;
//qu.options[0].selected = true;
//清空市区选项
shi.options.length = 0;
shi.options[shi.length] = new Option("请选择市","-1");
qu.options.length = 0;
qu.options[qu.length] = new Option("请选择区","-1");
for (var j = 0; j < city[sheng.selectedIndex - 1].city.length; j++) {
shi.options[shi.length] = new Option(city[sheng.selectedIndex - 1].city[j].name,j);
shi.onchange = function() {
//恢复默认选项
//qu.options[0].selected = true;
//清空区选项
qu.options.length = 0;
qu.options[qu.length] = new Option("请选择区","-1");
for (var k = 0; k < city[sheng.selectedIndex - 1].city[shi.selectedIndex - 1].area.length; k++) {
qu.options[qu.length] = new Option(city[sheng.selectedIndex - 1].city[shi.selectedIndex - 1].area[k],k);
}
}
}
}
}
}
</script>
<div id='div'></div>
