JavaScript实现三级联动菜单实例代码
网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要为大家详细介绍了JavaScript实现三级联动菜单实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文给大家分享的是使用javascript实现的一个简单的三级联动菜单,非常简单实用,有需要的小伙伴过来参考下吧。
用javascript制作的一个简单三级联动,非常简单实用
<!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="pres[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; } //获取值 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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程