<!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. elastic(7)bulk

    转自:https://www.cnblogs.com/xing901022/p/5339419.html bulk批量导入 批量导入可以合并多个操作,比如index,delete,update,cre ...

  2. EF CODEFIRST WITH ORACLE

    摸索了半天,运行通过了,但是还是有一点坑的,对于初次使用的人来说,可能会遇到几个问题 首先安装两个dll 如果你已经下载好了dll Oracle.ManagedDataAccess.dll Oracl ...

  3. 使用LaTeX按IEEE模板写论文时的参考文献管理方法（BibTeX使用小结）

    之前用LaTeX写论文时,参考文献都是手动添加管理的,真是让人很抓狂.所以这次趁着假期,简单看了一下怎么使用BibTeX对参考文献进行管理,这里以IEEE的最新模板为例. 首先说明,我之前用的是MiK ...

  4. Generalized Low Rank Approximation of Matrices

    Generalized Low Rank Approximations of Matrices JIEPING YE*jieping@cs.umn.edu Department of Computer ...

  5. startactivityforresult使用

    与startactivity基本相同,不过需要传入(intent,int)第二个int为请求ID,用来识别 在该activity中还应该重写nActivityResult(int requestCod ...

  6. No bean class specified on bean definition 解决方案

    调试Spring项目出现No bean class specified on bean definition异常 但是控制台并没有给出其他相关信息了 这个时候可以在AbstractBeanDefini ...

  7. php验证是否建立数据库，否，则自动建立

    <?php /* 默认建立的数据库为test,数据表为admin,管理员只需要修改DB_PWD(即本地的服务器密码)即可,用户密码采用md5加密 */ define(DB_HOST," ...

  8. GCD学习(六) dispatch_async 和dispatch_sync

    dispatch_sync(),同步添加操作.他是等待添加进队列里面的操作完成之后再继续执行. dispatch_queue_t concurrentQueue = dispatch_queue_cr ...

  9. p3295 [SCOI2016]萌萌哒

    传送门 分析 我们可以将一个点拆成logN个点,分别代表从点i开始,长度为2^k的子串 那么当我们处理两个区间相等的关系时,对区间做二进制拆分,拆成log个区间,分别并起来即可 当然我们这样做修改是省 ...

  10. C++笔记--模板

    一个string模板 简单的定义 template <class C>//模板形式,C是一个类型名字,不一定是某个类的名字 class String{ struct srep; srep ...