三级联动下拉菜单
2014-04-08 09:21
162 查看
一:HTML代码
二: 三级菜单数组举例定义(实际从数据库中获取)
View Code
三:JS代码
<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); } }
相关文章推荐
- ASP+JS三级联动下拉菜单[调用数据库数据]
- 全国省,市,区三级联动无刷新下拉菜单(客户端回调法)
- asp.net DropDownList 三级联动下拉菜单
- 自动筛选实现三级联动下拉菜单
- Ajax无刷新技术实现省市县三级联动下拉菜单--Asp.Net
- js实现年月日三级下拉菜单联动
- 全国省,市,区三级联动无刷新下拉菜单(输出xml表格法)
- ajax三级联动下拉菜单效果
- ASP+JS三级联动下拉菜单[调用数据库数据](转载)
- 五步让你的帝国拥有三级联动下拉菜单
- Easyui表单,文本框,下拉菜单三级联动练习代码
- Ajax无刷新技术实现省市县三级联动下拉菜单--Asp.Net
- 三级联动下拉菜单[调用数据库数据]
- 【JQuery】使用JQuery实现城市两级或三级联动(下拉菜单)
- 中国地区三级联动下拉菜单
- Thinkphp dwz 三级联动下拉菜单
- ASP的三级联动下拉菜单
- asp.net DropDownList 三级联动下拉菜单实现代码
- 中国省市二级联动和省市县三级联动下拉菜单
- js实现年月日三级下拉菜单联动