<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>js 联动下拉菜单</title>

　　<script>

window.onload=function()

{

var s1=new Sel('div1');

// 数据

s1.add('0',['1','2','3']);

s1.add('0_0',['1_1','1_2','1_3']);

s1.add('0_0_0',['1_1_1','1_1_2','1_1_3']);

s1.add('0_0_1',['1_2_1','1_2_2','1_2_3']);

s1.add('0_0_2',['1_3_1','1_3_2','1_3_3']);

s1.add('0_1',['2_1','2_2','2_3']);

s1.add('0_1_0',['2_1_1','2_1_2','2_1_3']);

s1.add('0_1_1',['2_2_1','2_2_2','2_2_3']);

s1.add('0_1_2',['2_3_1','2_3_2','2_3_3']);

s1.add('0_2',['3_1','3_2','3_3']);

s1.add('0_2_0',['3_1_1','3_1_2','3_1_3']);

s1.add('0_2_1',['3_2_1','3_2_2','3_2_3']);

s1.add('0_2_2',['3_3_1','3_3_2','3_3_3']);

s1.init(3);  // 几个下拉框

}

function Sel(id)

{

this.oParent=document.getElementById(id); //选择容器

this.data={};               // 存放数据

this.aSel=this.oParent.getElementsByTagName('select'); // 创建容器中的 select 下拉框

}

Sel.prototype=

{

init:function(num)

{

var This=this;

for(var i=1;i<=num;i++)

{

var oSel=document.createElement('select');

var opt=document.createElement('option');

opt.innerHTML='默认';           // 每个下拉框的初始值

oSel.appendChild(opt);           // 每个下拉框的初始元素

oSel.index=i;  //1,2,3

this.oParent.appendChild(oSel);  // 添加初始元素

oSel.onchange=function()   // 当下拉框改变的时候

{

This.change(this.index);

}

}

this.first();//创建第一个

},//初始化对象

add:function(key,val)

{

this.data[key]=val;

},//添加数据

first:function()

{

var arr=this.data['0'];

for(var i=0;i<arr.length;i++)

{

var opt=document.createElement('option');

opt.innerHTML=arr[i];

this.aSel[0].appendChild(opt);

}

},//创建第一个下拉菜单----元素添加数据

change:function(now)

{

var str='0';

for(i=0;i<now;i++)  //now====0,1,2  如果now=0,循环时str=0_0

{

str+='_'+(this.aSel[i].selectedIndex-1);

//取得当前选中元素的下一级的数据

}

if(this.data[str]) //如果有数据

{

var arr=this.data[str];

this.aSel[now].options.length=1;

for(var i=0;i<arr.length;i++)

{

var opt=document.createElement('option');

opt.innerHTML=arr[i];

this.aSel[now].appendChild(opt);

} // -------------------------------添加数据

this.aSel[now].options[1].selected=true;

now++;

if(now<this.aSel.length)

{

this.change(now);   // 更新下级

}

}

else

{

for(var i=now;i<this.aSel.length;i++)

{

this.aSel[i].options.length=1;

}// 返回默认值

}

}, // -------------------------change 结束

}

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

js 联动下拉菜单的更多相关文章

  1. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

  2. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

  3. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. js版本下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. JS实现下拉菜单的功能

    <!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...

  6. php+ajax的三级联动下拉菜单

    封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...

  7. ajax三级联动下拉菜单

    ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...

  8. 2016/3/24 ①数据库与php连接 三种输出fetch_row()、fetch_all()、fetch_assoc() ②增删改时判断（布尔型） ③表与表之间的联动 ④下拉菜单 ⑤登陆 三个页面

    ①数据库与php连接   图表 header("content-type:text/html;charset=utf-8"); //第一种方式: //1,生成连接,连接到数据库上的 ...

  9. js模拟下拉菜单-键盘、鼠标（代码详解）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Tiny4412 Android 启动流程

    Android系统的启动主要包括三个阶段: ①BootLoader启动 ②Linux Kernel启动 ③Android系统启动 前面我们大致分析了前面两个步骤,即u-boot和内核的启动流程(内核启 ...

  2. executeUpdate,executeQuery,executeBatch 的区别

    executeQuery : 用于实现单个结果集,例如: Select 一般使用executeQuery 就是来实现单个结果集的工具 executeUpdate 用于执行 INSERT.UPDATE ...

  3. [Python Study Notes]pynput实现对键盘控制与监控

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  4. C++的继承与接口

    1.继承方式 三种继承方式,public,private,protected.注意,继承方式是相对于某一层类的方法而言,并不是相对于子类的对象而言.对于外部世界()对象来说,protected和pri ...

  5. sharepoint文档库中日期显示详细日期，不显示几天前

    文档库---库设置----栏

  6. CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)

    建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找 ...

  7. 36-图像有用区(dfs, bfs)

    http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=92 图像有用区域 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   ...

  8. Android 菜单之子菜单SubMenu

    子菜单就是在点击了菜单中的选项后弹出的要对菜单中选项操作的菜单           他的操作与之前的两种类型的菜单操作差不多 动态添加 @Override public boolean onCreat ...

  9. 异常日志记录 DDLog

    项目中如果想把异常捕获再写入文件,有个十分容易使用的库DDLog. 首先导入库,在git上下载. 一:在项目初始化指定全局LogLeve ,一般在xxxapp.m中 staticconstint dd ...

  10. 《Effective Java》第5章 泛型

    第23条:请不要在新代码中使用原生态类型 声明中具有一个或者多个类型参数( type parameter)的类或者接口,就是泛型(generic)类或者接口. 每种泛型定义一组参数化的类型(param ...