纯js三维数组实现三级联动效果
本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>三级联动效果（纯JS实现）</p>
<div>
专业方向： <select name="sel1" id="sel1">
<option>--请选择专业--</option>
<option>JAVA</option><option>PHP</option><option>UI</option>
</select>
</div>
<div>
班级名称： <select name="sel2" id="sel2">
<option>--请选择班级--</option>
</select>
</div>
<div>
学生姓名： <select name="sel3" id="sel3">
<option>--请选择学生--</option>
</select>
</div>
<p>
您选择的内容是： <span id="sptext"></span>
</p>
<script>
var myclass = [
[['JAVA班级01'],['JAVA班级02'],['JAVA班级03']],
[['PHP班级01'],['PHP班级02'],['PHP班级03']],
[['UI班级01'],['UI班级02'],['UI班级03']]
];
var mystudy= [
[ //第一维代表专业 ， 第二维代表该专业的班级 ，第三维代表该班级的学生
[['JAVA班级01学生01'],['JAVA班级01学生02'],['JAVA班级01学生03'],['JAVA班级01学生04']],
[['JAVA班级02学生01'],['JAVA班级02学生02'],['JAVA班级02学生03'],['JAVA班级02学生04']],
[['JAVA班级03学生01'],['JAVA班级03学生02'],['JAVA班级03学生03'],['JAVA班级03学生04']]
],
[
[['PHP班级01学生01'],['PHP班级01学生02'],['PHP班级01学生03'],['PHP班级01学生04']],
[['PHP班级02学生01'],['PHP班级02学生02'],['PHP班级02学生03'],['PHP班级02学生04']],
[['PHP班级03学生01'],['PHP班级03学生02'],['PHP班级03学生03'],['PHP班级03学生04']]
],
[
[['UI班级01学生01'],['UI班级01学生02'],['UI班级01学生03'],['UI班级01学生04']],
[['UI班级02学生01'],['UI班级02学生02'],['UI班级02学生03'],['UI班级02学生04']],
[['UI班级03学生01'],['UI班级03学生02'],['UI班级03学生03'],['UI班级03学生04']]
]
];
document.getElementById("sel1").onchange = function(){
//获取选择的选项的索引值（从1开始的，没有返回-1）
var selectNum = this.selectedIndex;
//清空原来的选项
document.getElementById("sel2").length=1;
document.getElementById("sel3").length=1;
//循环添加子节点
for(var i=0;i<myclass[selectNum-1].length;i++){
//创建元素节点
var node =document.createElement("OPTION");
//创建文本节点
var text = document.createTextNode(myclass[selectNum-1][i]);
node.appendChild(text);
document.getElementById("sel2").appendChild(node);
}
};
document.getElementById("sel2").onchange = function(){
document.getElementById("sel3").length=1;
var selectStudentNum = this.selectedIndex;
var selectClassNum = document.getElementById("sel1").selectedIndex;
for(var i=0;i<mystudy[selectClassNum-1][selectStudentNum-1].length;i++){
var node =document.createElement("OPTION");
var text = document.createTextNode(mystudy[selectClassNum-1][selectStudentNum-1][i]);
node.appendChild(text);
document.getElementById("sel3").appendChild(node);
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jquery+json 通用三级联动下拉列表
Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现 第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第二个是采用Json数据格式构建,是我的第二次尝试改进
-
JS制作简单的三级联动
用javascript制作的一个简单三级联动,非常简单实用 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 省: <select style="wi
-
asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例.前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级联动,基于此应用,特将三种主要的ajax框架略作整理,方便有需要的朋友查阅. 在示例之前,我们先设置一个演示数据源,新建一个项目,项目结构如图: 主要文件如下:AreaModel.cs: 复制代码 代码如下: using System; using System.Collections.Generi
-
从QQ网站中提取的纯JS省市区三级联动菜单
我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动.所以研究了一下.他的界面如下: 何不直接使用的数据呢? 惊喜的是QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js 使用方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 直接使用QQ的省市区数据
-
PHP+Mysql+Ajax+JS实现省市区三级联动
基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句. index.html代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xh
-
省市区三级联动下拉框菜单javascript版
实现省市区三级下拉列表框,并且要实现联动效果. 方法一: 1.视图代码 <select class="prov" id="prov5" name="Province" data-code="@Model.Province"> </select> <select class="city" id="city5" name="City" dat
-
javascript实现省市区三级联动下拉框菜单
本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/
-
ASP+JS三级联动下拉菜单[调用数据库数据]
网上三级菜单多是多但是代码都比较烦,我这个应该说还是比较直观的:'肯定先要连接数据库了,不用说了 '数据库结构 '类别1表名称:a 字段:ID,Name 说明:ID为主键是类别1的ID值,Name为类别1的名称 '类别2表名称:aa 字段:ID,aID,Name 说明:ID为主键是类别2的ID值,aID为所属类别1的ID值,Name为类别2的名称 '类别3表名称:aaa 字段:ID,aID,aaID,Name 说明:ID为主键是类别3的ID值,aID为所属类别1的ID值,aaID为所
-
基于jQuery+JSON的省市二三级联动效果
省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. HTML 首先在head中载入jquery库和cityselect插件. <script type="text/javascript" src="js/jquery.js"></script> <script ty
-
js实现一个省市区三级联动选择框代码分享
运行效果: ================================================= 部分代码: ================================================= 当然首先你数据库中要有这个table,不然你没有数据.....^_^ 复制代码 代码如下: <tr> <td class="tr pr10 "> 所在地: </td> <td class="tl">