<!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. UML在软件开发中各个阶段的作用和意义

    经典的软件工程思想将软件开发分成5个阶段:需求分析,系统分析与设计,系统实现,测试及维护五个阶段. 之所以如此,是因为软件开发中饣含了物和人的因素,存在着很大的不确定性,这使得软件工程不可能像理想的, ...

  2. 将openfire部署到CentOS云服务器上

    http://ishere.cn/2014/07/25/centos-64bit-openfire.html      CentOS 64位安装openfire http://www.cnblogs. ...

  3. ubuntu系统里vi编辑器时，按方向箭头输入是乱码的ABCD字母？（图文详解）

    不多说,直接上干货! 问题详情 ubuntu系统里vi编辑器时,按方向箭头输入是乱码的ABCD字母?  解决办法 是由于预装的vim软件没更新,运行   sudo apt-get install vi ...

  4. 第5章 选举模式和ZooKeeper的集群安装 5-1 集群的一些基本概念

    xx就是我们的master,也就是我们的主节点.心跳机制,当有一个节点挂掉之后,整个集群还是可以工作的.选举模式,我们现在的master是正常运行的,但是在某些情况下它宕机了死机了,那么这个时候它这个 ...

  5. Ros指令集

    rospack = ros+pack(age) : provides information related to ROS packages rosstack = ros+stack : provid ...

  6. 磨刀——python及相关工具

    1.python语言包 1.1去https://www.python.org/,在download栏下载最新版python2或者python3 tips:1.点击下载会很慢,推荐:迅雷,百度云盘下载, ...

  7. final 子类禁止重写

    <?php //子类中编写和父类中完全一样的函数,是对父类中的函数进行重写 class BaseClass{ public function test() { echo "BaseCl ...

  8. phper 需要学习js

  9. Struts2框架04 struts和spring整合

    目录 1 servlet 和 filter 的异同 2 内存中的字符编码 3 gbk和utf-8的特点 4 struts和spring的整合 5 struts和spring的整合步骤 6 spring ...

  10. ubuntu16配置Mask-RCNN

    一.安装Anaconda3 1.下载 下载地址:https://www.continuum.io/downloads 2.安装 在文件目录下执行:bash Anaconda3-4.2.0-Linux- ...