（2）function loadProv() {}，此函数实现了初始化页面加载数据的功能。
（3）var prov = document.getElementById("prov")，获取存放省份的select下拉菜单。
（4）for (var key in provs)，遍历json结构数据。
（5）var provName = key，获取省份的名称。
（6）var optProv = document.createElement("option")，创建一个option元素对象。
（7）optProv.value = provName，设置option元素的value属性值。
（8）optProv.innerText = provName，设置option显示的文本内容。
（9）prov.appendChild(optProv)，将option元素添加到select下拉菜单。
（10）function provChange() {}，作为onchange事件处理函数。
（11）var prov = document.getElementById("prov"),获取省份下拉菜单。
（12）var city = document.getElementById("city"),获取城市下拉菜单。
（13）var provName = prov.value，获取当前选中的省份的value值。
（14）if (provName == "none") {
city.style.display = "none"
return
}，如果值等于none，说明选中的是第一项，那么城市下拉菜单还是具有隐藏状态，并跳出函数。
（15）else {
city.style.display = ""
},否则的话显示出城市下拉菜单，默认状态它是隐藏的。
（16）var citys = provs[provName]，获取城市，citys是个数组。
（17）for (var index = city.childNodes.length - 1index >= 0index--) {
var child = city.childNodes[index]
city.removeChild(child)
}，遍历城市下拉菜单下的option元素，然后删除这些元素。
之所以清空就是为了防止当再次加载的时候出现累加情况。
（18）for (var index = 0index <citys.lengthindex++) {}，遍历数组中的元素，也就是城市。
（19）var optCity = document.createElement("option")，创建option元素。
（20）optCity.value = citys[index]，设置option元素的value值。
（21）optCity.innerText = citys[index]，设置option元素的文本内容。
（22）city.appendChild(optCity)，将option元素添加select下拉菜单。
数据表形式数据
json形式数据
js代码//级联菜单
var province = ['江西省','江苏省','浙江省','甘肃省','江西省','江苏省','浙江省','甘肃省']
var city = Array(
new Array ('南昌市','赣州市','抚州市','上饶市'),
new Array('杭州市','温州市','宁波市'),
new Array('南京市','苏州市','昆山市','太仓市'),
new Array('兰州市','敦煌市','兰楼市'),
new Array ('南昌市','赣州市','抚州市','上饶市'),
new Array('杭州市','温州市','宁波市'),
new Array('南京市','苏州市','昆山市','太仓市'),
new Array('兰州市','敦煌市','兰楼市')
)
//遍历省份
for(var i=0i<province.lengthi++){
var opt = document.createElement('option') //创建一个结点
opt.value = province[i] //在value显示
opt.innerHTML = opt.value //页面显示
document.getElementById('big').appendChild(opt)
}
//省份值改变的时候调用函数
function show_small(){
//alert( document.getElementById('big').selectedIndex)//拿到下标
document.getElementById('small').innerHTML=""//清空 appendChild会追加
var index = document.getElementById('big').selectedIndex
for(var i=0i<city[index-1].lengthi++){ //注意下标
var opt = document.createElement('option')
opt.value = city[index-1][i]
opt.innerHTML = opt.value
document.getElementById('small').appendChild(opt)
}
}
html代码
<!-- 级联菜单-->
<select id="big" onchange="show_small()">
<option value="">--select--</option>
</select>
<select id="small">
<option value="">--select--</option>
</select>
手上刚好有个二级联动的，三级联动的你可以自己看着加进去，希望对你有帮助
