Question

jsp中利用javascript实现三级联动

Answer 1

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=0;i<province.length;i++){
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=0;i<city[index-1].length;i++){ //注意下标
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>
手上刚好有个二级联动的，三级联动的你可以自己看着加进去，希望对你有帮助