JS制作简单的三级联动
来源:互联网 发布:韦德上赛季场均数据 编辑:程序博客网 时间:2024/06/14 16:42
用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>
阅读全文
0 0
- JS制作简单的三级联动
- js 实现简单的三级联动
- 简单的三级联动
- 简单的三级联动
- 【js与jquery】三级联动菜单的制作
- 【js与jquery】三级联动菜单的制作
- JavaScript制作简单的三级联动菜单实例代码
- 简单的js日期三级联动下拉代码
- 不错的js三级联动
- 省市区三级联动的js
- 简单的实现三级联动
- JS简单实现三级联动效果
- Ajax制作的下拉列表三级联动
- jQuery制作的简化三级联动菜单
- 省市 的三级联动的js
- 三级省市联动菜单的JS源码
- 三级省市联动菜单的js源码
- JQuery/JS实现的三级联动选择
- 【Android】获取所有jpg和png图片
- 2017-10-22 HDU 2082 普通型母函数
- Help Hanzo(区间求素数) LightOJ
- 10.20校内ACM G题站队
- 476. Number Complement
- JS制作简单的三级联动
- stm32F4系列出现HardFault_Handler解决方法
- nitoj_202_二分——将区间分为三个部分
- [python爬虫] 正则表达式使用技巧及爬取个人博客实例
- 洛谷 P2024 食物链
- 101 单调性及极值复习 型三:方程根
- Node.js 安装配置
- do while循环求和、数位颠倒
- 数据流程图,业务流程图,模块结构图