<!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. CentOS和Ubuntu系统下安装vsftp（助推大数据部署搭建）

    不多说,直接上干货! 同时,声明,我这里安装的vsftp,仅仅只为我的大数据着想,关于网上的复杂安装,那是服务和运维那块.我不多牵扯,也不多赘述. 一.CentOS系统里安装vsftp 第一步:使用y ...

  2. 【266】增加bash文件的执行权限

    正常需要通过[bash pass.sh]来执行文件,但是可以通过增加bash文件的执行权限实现通过[./pass.sh]或者[pass.sh]来执行文件. 方法:通过chmod来增加权限,下面四种方法 ...

  3. 《Android应用性能优化》 第4章 高效使用内存

      本地类型 大小 字节 boolean jboolean 8位(取决于VM) 1 byte jbyte 8位 1 char jchar 16位 2 short jshort 16位 2 int ji ...

  4. 标签控件JLabel的使用

    ---------------siwuxie095                             工程名:TestUI 包名:com.siwuxie095.ui 类名:TestLabel.j ...

  5. bluebird 开发文档链接

    参考文献:http://bluebirdjs.com/docs/api/promise.mapseries.html

  6. 客户注册功能，发短信功能分离 通过ActiveMQ实现

    客户注册功能,发短信功能分离 通过ActiveMQ 配置链接工厂, 配置session缓存工厂(引入链接工厂) 2.配置模板对象JmsTemplate 引入缓存工厂    指定消息模式(队列,发布和订 ...

  7. WOJ 10 精英选拔

    神仙dp,膜Claris 题意:给一个长度为$n$的数列,求出不超过k次交换后的最大连续子区间和. 发现交换后的最优答案一定是这样的(0和2的长度可以为0)             0        ...

  8. 移动应用中的AR开发，5款最受欢迎工具推荐！

      英文原文:Top 5 Tools for Augmented Reality in Mobile Apps 还记得前段时间在网上很火的 3D 小熊不?托它的福,为相当一部分人科普了增强现实(AR) ...

  9. SDUT 3398 数据结构实验之排序一：一趟快排

    数据结构实验之排序一:一趟快排 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 给定N个长整 ...

  10. 《Effective Java》第3章 对于所有对象都通用的方法

    第8条:覆盖equals时请遵守通用约定 覆盖equals方法看起来似乎很简单,但是有许多覆盖方式会导致错误,并且后果非常严重.最容易避免这类问题的办法就是不覆盖equals方法,在这种情况下,类的每 ...