- 浏览: 1363683 次
- 性别:
- 来自: 江西
文章分类
- 全部博客 (287)
- oracle (30)
- Java (73)
- MySQL (16)
- Myeclipse/eclipse (12)
- javascript (15)
- JSP/Servlet (7)
- maven (14)
- AJAX (2)
- JQuery (9)
- tomcat (8)
- spring (21)
- Linux (28)
- PHP (9)
- UI (1)
- 编程错误及处理 (38)
- 多线程 (18)
- hibernate (10)
- Web Service (3)
- struts2 (6)
- log4j (3)
- SVN (4)
- DWR (1)
- lucene (1)
- 正则表达式 (4)
- jstl (2)
- SSL (3)
- POI (1)
- 网络编程 (1)
- 算法 (2)
- xml (4)
- 加密解密 (1)
- IO (7)
- jetty (2)
- 存储过程 (1)
- SQL Server (1)
- MongoDB (1)
- mybatis (1)
- ETL (1)
- Zookeeper (1)
- Hadoop (5)
- Redis (1)
- spring cloud (1)
最新评论
-
ron.luo:
牛逼,正解!
maven设定项目编码 -
lichaoqun:
java.sql.SQLException: Can't call commit when autocommit=true -
Xujian0000abcd:
Thanks...
Cannot proxy target class because CGLIB2 is not available. Add CGLIB to the clas -
renyuan2ni:
[i][b][u]引用[list]
[*][img][flas ...
Manual close is not allowed over a Spring managed SqlSession -
851228082:
宋建勇 写道851228082 写道<!-- 文件拷贝时 ...
maven设定项目编码
<%@ page contentType="text/html;charset=utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript 自定义多级联动下拉菜单</title> <script type="text/javascript"> var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; function addEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; } }; function Each(arrList, fun){ for (var i = 0, len = arrList.length; i < len; i++) { fun(arrList[i], i); } }; function GetOption(val, txt) { var op = document.createElement("OPTION"); op.value = val; op.innerHTML = txt; return op; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var CascadeSelect = Class.create(); CascadeSelect.prototype = { //select集合,菜单对象 initialize: function(arrSelects, arrMenu, options) { if(arrSelects.length <= 0 || arrMenu.lenght <= 0) return;//菜单对象 var oThis = this; this.Selects = [];//select集合 this.Menu = arrMenu;//菜单对象 this.SetOptions(options); this.Default = this.options.Default || []; this.ShowEmpty = !!this.options.ShowEmpty; this.EmptyText = this.options.EmptyText.toString(); //设置Selects集合和change事件 Each(arrSelects, function(o, i){ addEventHandler((oThis.Selects[i] = $(o)), "change", function(){ oThis.Set(i); }); }); this.ReSet(); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Default: [],//默认值(按顺序) ShowEmpty: false,//是否显示空值(位于第一个) EmptyText: "请选择"//空值显示文本(ShowEmpty为true时有效) }; Object.extend(this.options, options || {}); }, //初始化select ReSet: function() { this.SetSelect(this.Selects[0], this.Menu, this.Default.shift()); this.Set(0); }, //全部select设置 Set: function(index) { var menu = this.Menu //第一个select不需要处理所以从1开始 for(var i=1, len = this.Selects.length; i < len; i++){ if(menu.length > 0){ //获取菜单 var value = this.Selects[i-1].value; if(value!=""){ Each(menu, function(o){ if(o.val == value){ menu = o.menu || []; } }); } else { menu = []; } //设置菜单 if(i > index){ this.SetSelect(this.Selects[i], menu, this.Default.shift()); } } else { //没有数据 this.SetSelect(this.Selects[i], [], ""); } } //清空默认值 this.Default.length = 0; }, //select设置 SetSelect: function(oSel, menu, value) { oSel.options.length = 0; oSel.disabled = false; if(this.ShowEmpty){ oSel.appendChild(GetOption("", this.EmptyText)); } if(menu.length <= 0){ oSel.disabled = true; return; } Each(menu, function(o){ var op = GetOption(o.val, o.txt ? o.txt : o.val); op.selected = (value == op.value); oSel.appendChild(op); }); }, //添加菜单 Add: function(menu) { this.Menu[this.Menu.length] = menu; this.ReSet(); }, //删除菜单 Delete: function(index) { if(index < 0 || index >= this.Menu.length) return; for(var i = index, len = this.Menu.length - 1; i < len; i++){ this.Menu[i] = this.Menu[i + 1]; } this.Menu.pop() this.ReSet(); } }; window.onload=function(){ var menu = [ {'val': '1', 'txt': 'value'}, {'val': '2 ->', 'menu': [ {'val': '2_1'}, {'val': '2_2'} ]}, {'val': '3 ->', 'menu': [ {'val': '3_1 ->', 'menu': [ {'val': '3_1_1'}, {'val': '3_1_2'} ]}, {'val': '3_2'} ]}, {'val': '4 ->', 'menu': [ {'val': '4_1 ->', 'menu': [ {'val': '4_1_1 ->', 'menu': [ {'val': '4_1_1_1'}, {'val': '4_1_1_2'} ]} ]} ]} ]; var sel=["sel1", "sel2", "sel3", "sel4", "sel5"]; var val=["3 ->", "3_1 ->", "3_1_2"]; var cs = new CascadeSelect(sel, menu, { Default: val }); $("btnA").onclick=function(){cs.ShowEmpty=!cs.ShowEmpty;} $("btnB").onclick=function(){ cs.Add( {'val': '5 ->', 'menu': [ {'val': '5_1 ->', 'menu': [ {'val': '5_1_1 ->', 'menu': [ {'val': '5_1_1_1 ->', 'menu': [ {'val': '5_1_1_1_1'} ]} ]} ]} ]} ) } $("btnC").onclick=function(){ cs.Delete(3) } } </script> <style type="text/css"> .sel select{ width:100px;} </style> </head> <body> <%String sel1 = request.getParameter("sel1"); System.out.println(sel1);%> <%String sel2 = request.getParameter("sel2"); System.out.println(sel2);%> <%String sel3 = request.getParameter("sel3"); System.out.println(sel3);%> <%String sel4 = request.getParameter("sel4"); System.out.println(sel4);%> <%String sel5 = request.getParameter("sel5"); System.out.println(sel5);%> <%out.println(sel1);%>| <%out.println(sel2);%>| <%out.println(sel3);%>| <%out.println(sel4);%>| <%out.println(sel5);%> <form action=""> <div class="sel"> <select id="sel1" name="sel1"></select> <select id="sel2" name="sel2"></select> <select id="sel3" name="sel3"></select> <select id="sel4" name="sel4"></select> <select id="sel5" name="sel5"></select> </div> <br /> <div> <input id="btnA" type="button" value="显示/不显示空值" /> <input id="btnB" type="button" value="添加菜单" /> <input id="btnC" type="button" value="减少菜单" /> </div> <input type="submit" value="提 交"/> </form> </body> </html>
引自:http://www.cnblogs.com/cloudgamer/archive/2008/06/24/1228736.html
也可参见附件(引自作者原文)!
- 多级菜单联动.rar (2.1 KB)
- 下载次数: 13
发表评论
-
Checkbox
2015-05-27 09:54 0$("input[name='orgId'][c ... -
URL传递中文参数乱码问题
2014-03-14 12:55 1109项目特殊要求,form表单使用get方式提交,由此出现了中文乱 ... -
struts2-json-plugin插件的使用
2013-09-21 19:44 5827一、编写Action类/** * AjaxJsonActi ... -
struts2异步访问
2013-09-21 17:18 2564一、编写异步Action代码/** * Ajax1Acti ... -
跨站脚本漏洞(XSS)示例
2012-12-27 17:51 2163index.jsp <%@ page language= ... -
Javascript异步编程的4种方法
2012-12-26 09:11 878http://www.ruanyifeng.com/blog/ ... -
js日历控件-calendar.js
2012-09-11 18:48 2282calendar.js var cal; var isFo ... -
js实现年月日三级下拉菜单联动
2012-06-20 09:55 2276效果图: 完整代码: <html> &l ... -
QuickValidate 是一个简单易扩展的表单验证插件
2012-06-11 09:32 1002http://www.onextrapixel.com/201 ... -
关闭页面之前传递数据到父页面
2012-05-15 12:29 0<script type="text/java ... -
highcharts的导出功能
2012-05-02 11:31 3736package cn.com.songjy.servlet; ... -
Automation 服务器不能创建对象
2012-03-07 09:14 2156<script type="text/java ... -
js 截取字符串 一个中文长度为2
2012-02-08 13:38 2250<script> /* //截取字符串 包 ... -
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截
2012-02-03 09:32 3361<!DOCTYPE HTML PUBLIC " ... -
既可以输入又可以选择菜单 JavaScript
2010-11-19 11:09 1737例子1 <%@ page contentType=&qu ... -
JSP 动态时间 JavaScript
2010-11-16 11:46 1066<%@ page language="java ...
相关推荐
本代码实现了 省地县三级联动展现,从xml文件中读取省地县的数据。
纯用javascript实现的ajax三级联动无刷新,数据传送采用json格式,开发平台采用vs2010 asp.net,压缩包含有sql脚本
JavaScript 自定义多级联动浮动菜单!JavaScript 自定义多级联动浮动菜单!JavaScript 自定义多级联动浮动菜单!JavaScript 自定义多级联动浮动菜单!源码下载!
JavaScript 多级联动select
javascript实现的网页三级联动的菜单,非常实用
JavaScript 自定义多级联动下拉菜单
运用 javascript 实现 三级联动 简单明了 可以根据 需要改成2级 或复杂的多级 只要思路清晰
搞了一晚上才弄出来,希望大家多多提议!JavaScript 联动列表 JavaScript列子
包含源代码,以及源代码解析。 JavaScript 多级联动浮动菜单
全国城市三级联动下拉列表 javascript,兼容所有jquery。使用在html5中简直完美。 本来就是一个JS
动态多级联动 多级城市 JQ插件 select linkage jq
利用JS与HTML实现地级市的简易的二级联动,在HTML中当第一级列表内的值发生改变时,二级列表项的值也随着改变。仅供学习和交流
JavaScript多级联动浮动菜单 第二版,包含仿京东商城商品分类菜单、仿window xp右键菜单、仿淘宝拼音索引菜单,上一个版本基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高。...
js多级联动多选checkbox插件
简单的javascript 多级联动 包含有页面数据读取
dropList v1.0-无限级联动下拉框JavaScript类 1、无限制多级联动 2、支持选择状态保存,使用Cookie 3、支持初始值选定 4、同一页面中多个应用不会相互影响 包含一个省市县三级联动的例子
jQuery移动端省市二级联动选择插件.zip
三级联动下拉框, 也可以扩展为N级联动, 自动判别 label, value, 速度快,项目中肯定用得到
NULL 博文链接:https://heisetoufa.iteye.com/blog/353661