手把手教你做三级联动
来源:互联网 发布:手机连发软件 编辑:程序博客网 时间:2024/06/05 16:12
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> 省: <select style="width: 100px;" id="pre" onchange="chg(this);"> <option value="-1">请选择</option> </select> 市: <select style="width: 100px;" id="city" onchange="chg2(this)" ;></select> 区: <select style="width: 100px;" id="area"></select> </body> <script> //声明省 var pres = ["北京", "上海", "山东"]; //直接声明Array //声明市 var cities = [ ["东城", "昌平", "海淀"], ["浦东", "高区"], ["济南", "青岛"] ]; var areas = [ [ ["东城1", "东城2", "东城3"], ["昌平1", "昌平2", "昌平3"], ["海淀1", "海淀2", "海淀3"] ], [ ["浦东1", "浦东2", "浦东3"], ["高区1", "高区2", "高区3"] ], [ ["济南1", "济南2"], ["青岛1", "青岛2"] ] ] //设置一个省的公共下标 var pIndex = -1; var preEle = document.getElementById("pre"); var cityEle = document.getElementById("city"); var areaEle = document.getElementById("area"); //先设置省的值 for(var i = 0; i < pres.length; i++) { //声明option.<option value="i">pres[i]</option> var op = new Option(pres[i], i); //添加 preEle.options.add(op); } function chg(obj) { if(obj.value == -1) { cityEle.options.length = 0; areaEle.options.length = 0; return; } //获取值 var val = obj.value; pIndex = obj.value; //获取ctiry var cs = cities[val]; //获取默认区 var as = areas[val][0]; //先清空市 cityEle.options.length = 0; areaEle.options.length = 0; for(var i = 0; i < cs.length; i++) { var op = new Option(cs[i], i); cityEle.options.add(op); } for(var i = 0; i < as.length; i++) { var op = new Option(as[i], i); areaEle.options.add(op); } } function chg2(obj) { var val = obj.selectedIndex; var as = areas[pIndex][val]; areaEle.options.length = 0; for(var i = 0; i < as.length; i++) { var op = new Option(as[i], i); areaEle.options.add(op); } } </script></html>
0 0
- 手把手教你做三级联动
- 手把手教你做三级联动
- ajax做三级联动
- ajax做三级联动
- 手把手系列之四十八—手把手教你做寿司
- 手把手教你做键盘记录器
- 手把手教你做游戏外挂
- 手把手教你用枫叶做玫瑰
- 手把手教你做java远程控制
- 手把手教你做背单词软件
- 手把手教你做背单词软件
- 手把手教你做android widget
- 手把手 教你如何做网线接头
- 手把手教你做android widget
- 手把手教你做iOS推送
- 手把手教你做iOS推送
- 手把手教你做iOS推送
- 手把手教你做iOS推送
- linux/shell每日学习笔记
- Fragment用法详细说明
- 学习java多线程的线程池
- Activity生命周期
- TMS320F28335之系统时钟
- 手把手教你做三级联动
- IOS设备兼容Ipv5/ipv6访问Ipv4服务器
- 软件架构
- 手把手教你做三级联动
- 维护篇(5.2)-07. 调整DHCP租约时间 ❀ 飞塔 (Fortinet) 防火墙
- Hint 强制使用索引有时失灵?
- CUDA 7.5 不支持GCC4.7及以上的版本
- Android Activity生命周期(二)
- ViewPager中的过时方法和循环的实现