javascript 三级下拉选择菜单Levels对象

JavaScript:


代码如下:

<script type="text/javascript">
var level1 = ["Beijing", "GuangZhou", "ShangHai"];
var level2 = [["ZhaoYang", "TianTan", "GuGong"], ["Tianhe", "Panyu"], ["PuDong", "PuXi"]];
var level3 = [[["TianShan", "HuangShan"], ["TianTan1", "TianTan2"], ["GuGong1", "GuGong2", "GuGong3", "GuGong4"]], [["TianHe1", "TianHe2"], ["PanYu1", "PanYu2"]], [["PuDong1", "PuDong2"], ["PuXi1", "PuXi2"]]];
var Levels = {
fL: null,//用存储各级select的DOM引用
sL: null,
tL: null,
l1: null,
l2: null,
l3: null,
$: function(id){
return (typeof id == "object") ? id : document.getElementById(id);
},
init: function(fID, sID, tID, l1, l2, l3){
this.fL = this.$(fID);
this.sL = this.$(sID);
this.tL = this.$(tID);
this.l1 = l1;
this.l2 = l2;
this.l3 = l3;
this.fL.options.add(new Option("Select",-1));//给一级菜单添加一个“select”标志
for (var i = 0; i < l1.length; i++) {
var item = new Option(l1[i], i);
this.fL.options.add(item);
}
this.doLev2(); //调用doLev2函数,处理二级菜单
this.doLev3(); //调用doLev3函数,处理三级菜单
},
removeSTL: function(){ //用于删除第二、三级的菜单项
this.sL.options.length = 0;
this.tL.options.length = 0;
},
removeTL: function(){ //用于删除第三级的菜单项
this.tL.options.length = 0;
},
doLev2: function(){ //处理二级菜单
var that = this;
this.fL.onchange = function(){
that.removeSTL(); //删除旧second的select
if (that.fL.selectedIndex == 0) {
that.removeSTL(); // //删除旧second的select
}
else {
that.sL.options.add(new Option("Select", -1)); //给二级菜单添加一个“select”标志
//获取第二级所需的数组
var items = that.l2[that.fL.selectedIndex - 1];
for (var i = 0; i < items.length; i++) { //添加第二级的新select项
var item = new Option(items[i], i);
that.sL.options.add(item);
}
}
}
},
doLev3: function(){ //处理三级菜单
var that = this;
this.sL.onchange = function(){
that.removeTL(); //删除旧third的select
if (that.sL.selectedIndex == 0) {
that.removeTL(); //删除旧third的select
}
else {
that.tL.options.add(new Option("Select", -1)); //给三级菜单添加一个“select”标志
//获取第三级所需的数组
var items = that.l3[that.fL.selectedIndex - 1][that.sL.selectedIndex - 1];
for (var i = 0; i < items.length; i++) { //添加第三级的新select项
var item = new Option(items[i], i);
that.tL.options.add(item);
}
}
}
}
}
onload = function(){
Levels.init("first", "second", "third", level1,level2,level3); //调用Levels的init方法
}
</script>

HTML:


代码如下:

<form>
<select id="first">
</select>
<select id="second">
</select>
<select id="third">
</select>
</form>

演示代码:

Untitled Document

var level1 = ["Beijing", "GuangZhou", "ShangHai"];
var level2 = [["ZhaoYang", "TianTan", "GuGong"], ["Tianhe", "Panyu"], ["PuDong", "PuXi"]];
var level3 = [[["TianShan", "HuangShan"], ["TianTan1", "TianTan2"], ["GuGong1", "GuGong2", "GuGong3", "GuGong4"]], [["TianHe1", "TianHe2"], ["PanYu1", "PanYu2"]], [["PuDong1", "PuDong2"], ["PuXi1", "PuXi2"]]];

var Levels = {
fL: null,//用存储各级select的DOM引用
sL: null,
tL: null,
l1: null,
l2: null,
l3: null,
$: function(id){
return (typeof id == "object") ? id : document.getElementById(id);
},
init: function(fID, sID, tID, l1, l2, l3){
this.fL = this.$(fID);
this.sL = this.$(sID);
this.tL = this.$(tID);
this.l1 = l1;
this.l2 = l2;
this.l3 = l3;

this.fL.options.add(new Option("Select",-1));//给一级菜单添加一个"select"标志

for (var i = 0; i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • JavaScript操作选择对象的简单实例

    JavaScript操作选择对象的简单实例 //替换选中文本内容,参数text为要替换的内容 function SetSelectionText(text) { //非IE浏览器 if (window.getSelection) { var sel = window.getSelection(); alert(sel.rangeCount); //选区个数, 通常为 1 . sel.deleteFromDocument(); //清除选择的内容 var r = sel.getRangeAt(0)

  • JS实现简单面向对象的颜色选择器实例

    本文实例讲述了JS实现简单面向对象的颜色选择器.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • 关于JavaScript对象的动态选择及遍历对象

    (一)动态选择方法及属性 在实际工作中,我们经常会遇到这种情况:根据某个条件来调用两个方法[1]中的一个,或是在两个属性[2]中的一个上面进行读写操作.下面的代码展示了这种情形: 复制代码 代码如下: if (condition) { myObj.method1(someArg); } else { myObj.method2(someArg); } JavaScript提供了一种简单的语法,即使用方括号操作符([])来动态地选择方法和属性.正如下面的代码所示,JavaScript有两种等价的成

  • javascript 三级下拉选择菜单Levels对象

    JavaScript: 复制代码 代码如下: <script type="text/javascript"> var level1 = ["Beijing", "GuangZhou", "ShangHai"]; var level2 = [["ZhaoYang", "TianTan", "GuGong"], ["Tianhe", &qu

  • 基于javascript实现全国省市二级联动下拉选择菜单

    本文实例讲述了js实现全国省市二级联动下拉选择菜单,分享给大家供大家参考.具体如下: 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"&g

  • js实现的全国省市二级联动下拉选择菜单完整实例

    本文实例讲述了js实现的全国省市二级联动下拉选择菜单.分享给大家供大家参考.具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-province-city-cho-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

  • iOS下拉选择菜单简单封装

    本文实例为大家分享了简单封装的iOS下拉选择菜单代码,供大家参考,具体内容如下 // // OrderListDownMenu.h #import <UIKit/UIKit.h> @protocol OrderListDownMenuDelegate <NSObject> - (void)OrderListDownMenu:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath; @end

  • 纯JSP+DWR实现三级联动下拉选择菜单实现技巧

    网上看到一些例子,对于一个简单的三级联动,都加上什么Struts, Hibernate诸如此类的框架.这个Ajax联动殊不知和这些框架有什么关系,一个小Demo干嘛整得那么大. 今天我做了一个dwr+jsp做的例子. web.xml: 复制代码 代码如下: <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.s

  • ajax读取数据库内容实现二级联动下拉选择菜单示例

    复制代码 代码如下: <PRE class=javascript name="code"></PRE><PRE class=javascript name="code">---------------------这是ajax(javascript)代码---------------------------</PRE><PRE class=javascript name="code">&l

  • javascript省市区三级联动下拉框菜单实例演示

    本文实例讲述了javascript实现省市区三级联动下拉框菜单代码,像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"

  • 原生JavaScript实现动态省市县三级联动下拉框菜单实例代码

    像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做任何选择时: 选择时: 代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三级联动测试</titl

  • javascript实现省市区三级联动下拉框菜单

    本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/

  • JS实现的Select三级下拉菜单代码

    本文实例讲述了JS实现的Select三级下拉菜单.分享给大家供大家参考.具体如下: 这里使用js实现Select三级下拉菜单,比如全国省市城市选择.数码类产品分类.人才类别选择等,都比较具有代表性,在表单中容易使用Select下拉列表菜单供用户选择,当然,自己用还是需要稍微改动的,比如至少菜单内容要改成自己需要的,其它的好说. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3-select-menu-codes/ 具体代码如下: <ht

随机推荐