jsp中利用javascript实现三级联动

JavaScript018

jsp中利用javascript实现三级联动,第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=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>

手上刚好有个二级联动的，三级联动的你可以自己看着加进去，希望对你有帮助

不知道你list中的数据有没有问题，但是，document.getElementById不能在还没有加载某dom时操作它，也就是说，你要把这一段JS放在<select id="major" name="major"></select>的后面。

你可以试试看。