<!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. mysql case

    1.table CREATE TABLE `lee`(`id` INT(10) NOT NULL auto_increment,`name` varchar(20) DEFAULT null,`bir ...

  2. Windows系统上release版本程序bug跟踪解决方案（1）-日志记录

    使用场景: Win32程序在release模式下编译完成,发送给最终用户使用时,我们的程序有时候也会出现崩溃的情况,这个时候如果能快速定位崩溃原因或提供一些程序崩溃时的状态信息,对我们解决问题将会带来 ...

  3. springmvc urlpattern配置详解

    静态资源无法访问问题的解决方案: 1.使用Tomcat默认的Servlet解决:在web.xml中加以下代码

  4. git 本地代码到github（转）

    git 本地代码到github   一·什么是gitHub? 官网解释:gitHub是一个让无论处于何地的代码工作者能工作于同一个项目,同一个版本的平台.(GitHub is a code hosti ...

  5. keystone组件

    引:  什么是keystone    为何要有keystone     keystone的功能     keystone概念详解     keystone与openstack其他组件关系      k ...

  6. php学习笔记-return语句

    一个函数中可以有return语句,也可以没有.什么时候需要呢?就是当你想接收函数的执行结果的时候,你需要一个return 语句. 函数执行完return语句之后,return语句后面的代码是永远不会得 ...

  7. 算法Sedgewick第四版-第1章基础-2.1Elementary Sortss-002插入排序法(Insertion sort)

    一.介绍 1.时间和空间复杂度 运行过程 2.特点: (1)对于已排序或接近排好的数据,速度很快 (2)对于部分排好序的输入,速度快 二.代码 package algorithms.elementar ...

  8. 1、awk打开多个文件的方法

    转载:http://www.cnblogs.com/Berryxiong/p/6209324.html 1.当awk读取的文件只有两个的时候,比较常用的有三种方法(1)awk 'NR==FNR{... ...

  9. input 输入框两种改变事件的方式

    一.在输入框内容变化的时候不会触发,当鼠标在其他地方点一下才会触发 $('input[name=myInput]').change(function() { ... }); 二.在输入框内容变化的时候 ...

  10. Data Base oracle简单使用及管理工具使用

    oracle简单使用及管理工具使用 一.常用工具: 1.sqldeveloper 2.navicat for oracle 3.PLSQL Developer 4.toad