您的位置:首页 > 其它

三级联动下拉菜单

2014-04-08 09:21 162 查看
一:HTML代码

<select id='c1'></select>
<select id='c2'></select>
<select id='c3'></select>


二: 三级菜单数组举例定义(实际从数据库中获取)

var city1 = ['请选择','江苏','上海'];
var city2 = [
[''],
['suz','南京','无锡'],
['上海A','上海B','上海C','上海D',]
];
var city3 = [
[],
[
['s1','s2','s3'],
['玄武','下关'],
['a','b','c','d'],
],
[
['上海A1','上海A2','上海A3'],
['上海B1','上海B2'],
['11','2','3','4'],
]
];


View Code
三:JS代码

window.onload = function () {

createCity1();
c1.onchange=createCity2;
document.getElementById('c2').onchange=createCity3;
}

function createCity1(){
c1 = document.getElementById('c1');
for(var i in city1){
var op = new Option(city1[i],city1[i]);
c1.options.add(op);
}

}
function createCity2(){
var  c1_index =document.getElementById('c1').selectedIndex;
var  c2 =document.getElementById('c2');
c2.options.length = 0;
for(var j in city2[c1_index]){
var op2 = new Option(city2[c1_index][j],city2[c1_index][j]);
c2.options.add(op2);
}
}
function createCity3(){

var  c1_index =document.getElementById('c1').selectedIndex;
var  c2_index =document.getElementById('c2').selectedIndex;
var  c3 =document.getElementById('c3');
c3.options.length = 0;
for(var k in city3[c1_index][c2_index]){
var op3 = new Option(city3[c1_index][c2_index][k],city3[c1_index][c2_index][k]);
c3.options.add(op3);

}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: