JS动态级联菜单
JS动态级联菜单是前端常用的一个功能，特此抽时间研究了下，附上代码
<html>
<head>
<meta charset="utf-8" />
<title>级联菜单</title>
</head>
<body>
<form name="caseSelect" class="J_select">
<p>
<select name="chapter">
<option value="0">请选择章</option> </select>
<select name="section">
<option value="0">请选择节</option>
</select>
<select name="section_s">
<option value="0">请选择次节</option>
</select>
<select name="section_2s">
<option value="0">请选择次次节</option>
</select>
</p>
</form>
</body>
<script type="text/javascript" src="http://img3.cache.netease.com/game/img15/dahua-music/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
// 原生
var data = [
{text:'1. DOM基础',value:'1',
list:[
{text:'1.1 文档树',value:'1.1',
list:[{text:'1.1.1 Hello World',value:'1.1.1',
list:[{text:'1.1.1.1 OK',value:'1.1.1.1'}]},
{text:'1.1.2 Web Dev',value:'1.1.2',list:[{text:'1.1.2.1 OK2',value:'1.1.2.1'}]}]},
{text:'1.2 节点操作',value:'1.2'},
{text:'1.3 元素遍历',value:'1.3'},
{text:'1.4 样式操作',value:'1.4'},
{text:'1.5 属性操作',value:'1.5'},
{text:'1.6 表单操作',value:'1.6'}
]},
{text:'2. 事件模型',value:'2',
list:[
{text:'2.1 事件类型',value:'2.1',list:[{text:'2.1.1 Hello World',value:'2.1.1',list:[{text:'2.1.1.1 OK',value:'2.1.1.1'}]}]},
{text:'2.2 事件模型',value:'2.2'},
{text:'2.3 事件应用',value:'2.3'}
]}
]; // 文档加载完之后执行
jQuery(function($){
var Jselect = $('.J_select select');
var JilianSelect = window.JilianSelect;
var chapterSelect = $('.J_select select').eq(0);
var sectionSelect = $('.J_select select').eq(1);
var JilianSelect = {
init:function(Jselect,data){
var self = this;
// var this.Jselect = Jselect;
// var this.data = data;
self.bind(data);
this.fillSelect(Jselect.eq(0),data);
},
fillSelect: function(select,list){
//清除原有数据
var option = select.find('option');
for(var i=option.length-1;i>0;i--){
option.eq(i).remove();
}
// 新增数据
$.each(list, function(i,item){
select.append('<option value="'+item.value+'">'+item.text+'</option>');
});
},
bind: function(data){
var self = this;
Jselect.change( function() {
// 下拉触发
var value = this.value;
var nextSelect = $(this).next();
// 多层方法1
// var tag = this.value.split('.');
// var str="data";
// for(var j=0;j<tag.length;j++){
// str+="["+(tag[j]-1)+"].list";
// }
// self.fillSelect(nextSelect,eval(str)); // 2层
// $.each(data, function(i, item) {
// if (value == item.value) {
// self.fillSelect(nextSelect,item.list);
// }
// });
// 多层方法2
function tochild(it){
$.each(it, function(i, item) {
if (value == item.value) {
self.fillSelect(nextSelect,item.list);
} else{
if(item.list)
tochild(item.list);
}
});
}
tochild(data);
// $.each(data, function(i, item) {
// if (value == item.value) {
// self.fillSelect(nextSelect,item.list); // } else {
// // 第三个
// $.each(item.list, function(c, child) {
// if (value == child.value) {
// self.fillSelect(nextSelect,child.list);
// } else {
// // 第四个
// $.each(child.list, function(c4, child4) {
// if (value == child4.value) {
// self.fillSelect(nextSelect,child4.list);
// }
// })
// }
// })
// }
// }); });
}
}
JilianSelect.init(Jselect,data); });
</script>
<html>
JS动态级联菜单的更多相关文章
- JS实战 · 级联菜单选择省份和城市（两种）
DOM编程步骤.思路 1.定义界面: 通过html标签将数据进行封装: 2.定义一些静态样式: 利用css: 3.需要动态地完成的和用户的交互: a:明确事件源: ...
- js实现级联菜单（没有后台）
html代码: <!-- js级联菜单 --> <div id="cascMenu"> <select id="select" o ...
- JS实现级联菜单
是首先应该添加两个下拉列表并设置id属性来方便操作: <select id="country"> <option>国家</option> < ...
- js实现“级联菜单”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js进阶 9-12 js如何实现级联菜单 （章节测试）
js进阶 9-12 js如何实现级联菜单 (章节测试) 一.总结 一句话总结: 1.js如何实现级联菜单 ? 二维数组,以第一级菜单的文本值做键,以对应的二级菜单选项的文本做值 2.用哪个属性可以获 ...
- Ajax实现动态的二级级联菜单
今天花了点时间用Ajax实现了一个二级级联菜单.整理总结一下.为了把重点放在Ajax和级联菜单的实现上,本文省略了数据库建表语句和操作数据库的代码! 数据库建表语句就不帖出来了.主要有两张表,区域表: ...
- 前台JS(Jquery)调用后台方法 无刷新级联菜单示例
前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 http://www.dtan.so CasMenu.aspx页 ...
- Ajax+json实现菜单动态级联
1:jsp //级联ajax处理函数 function areaChange(){ var areano=document.all("areaNo").value; v ...
- 【jQuery Demo】jQuery打造动态下滑菜单
作者:漫凯维奇 来源:[教程]jQuery打造动态下滑菜单 Tip:这只是一个转载,源代码可以在上面的来源博文中下载 此教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单.效果如 ...
随机推荐
- 【python】函数之内置函数
Python基础 内置函数 今天来介绍一下Python解释器包含的一系列的内置函数,下面表格按字母顺序列出了内置函数: 下面就一一介绍一下内置函数的用法: 1.abs() 返回一个数值的绝对值,可以是 ...
- lua 代码风格
参考 http://www.kancloud.cn/kancloud/lua_style_guide/66327 1.命名 1.命名法:小驼峰命名法,大驼峰命名法(Pascal命名法),小下划线命名 ...
- 使用date类和format类对系统当前时间进行格式化显示
一:Date------------String 代码1:(代码二对显示出来的时间格式进行优化) package DateDemo; import java.text.SimpleDateFormat ...
- The processing instruction target matching ''[xX][mM][lL]" is not allowed
报错的来源是: <?xml version="1.0" encoding="UTF8"?> 解决方案::,一般是WSDL的头文件的格式出了问题,比如 ...
- 重复数据分析的三个常用语法distinct, group by, partition by
由于数据经常会出现重复现象,数据去重是数据分析中常用操作之一,而distinct,group by, partition by三者都可以实现去重功能,实践中需要根据不同的场景需求来选取相应的语法. d ...
- STM32 使用 FreeRTOS过程记录
资源:http://blog.csdn.net/zhzht19861011/article/category/6191478 资源:可以下载安富莱的STM32-V5开发版资料中的FreeRTOS教程, ...
- TextView.setTextColor颜色值的理解
TextView.setTextColor(int value),括号里是int型的值,可以填充的值有三种情况. 第一种:系统自带的颜色类,TextView.setTextColor(android. ...
- jQuery Ajax传递数组到asp.net web api参数为空
前端: var files = []; files.push({ FileName: "1.jgp", Extension: ".jgp", FileType: ...
- ROS实时采集Android的图像和IMU数据
前言 临近毕业,整理一下之前做的东西.这篇博客来自于博主在2016年3月份投的一篇会议论文(论文主要介绍了一个基于手机摄像头和IMU的简单VIO系统,用于AR的Tracking部分,本博文 ...
- 关于本地缓存localStorage
localStorage的优势 1.localStorage拓展了cookie的4K限制 2.localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数 ...