- 浏览: 1379697 次
- 性别:
- 来自: 江西
文章分类
- 全部博客 (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 1154项目特殊要求,form表单使用get方式提交,由此出现了中文乱 ... -
struts2-json-plugin插件的使用
2013-09-21 19:44 5870一、编写Action类/** * AjaxJsonActi ... -
struts2异步访问
2013-09-21 17:18 2638一、编写异步Action代码/** * Ajax1Acti ... -
跨站脚本漏洞(XSS)示例
2012-12-27 17:51 2208index.jsp <%@ page language= ... -
Javascript异步编程的4种方法
2012-12-26 09:11 930http://www.ruanyifeng.com/blog/ ... -
js日历控件-calendar.js
2012-09-11 18:48 2339calendar.js var cal; var isFo ... -
js实现年月日三级下拉菜单联动
2012-06-20 09:55 2331效果图: 完整代码: <html> &l ... -
QuickValidate 是一个简单易扩展的表单验证插件
2012-06-11 09:32 1057http://www.onextrapixel.com/201 ... -
关闭页面之前传递数据到父页面
2012-05-15 12:29 0<script type="text/java ... -
highcharts的导出功能
2012-05-02 11:31 3809package cn.com.songjy.servlet; ... -
Automation 服务器不能创建对象
2012-03-07 09:14 2196<script type="text/java ... -
js 截取字符串 一个中文长度为2
2012-02-08 13:38 2295<script> /* //截取字符串 包 ... -
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截
2012-02-03 09:32 3416<!DOCTYPE HTML PUBLIC " ... -
既可以输入又可以选择菜单 JavaScript
2010-11-19 11:09 1802例子1 <%@ page contentType=&qu ... -
JSP 动态时间 JavaScript
2010-11-16 11:46 1114<%@ page language="java ...
相关推荐
这里,我们主要探讨的是使用JavaScript(js)和JavaServer Pages(jsp)来创建一个具有三级联动功能的系统。这种功能常见于诸如地区选择、产品分类等场景,用户在一个下拉框中做出选择时,其他关联的下拉框会根据...
在本例的"三级联动demo"中,我们讨论的是如何使用JavaScript和HTML来实现省市区的选择功能。 首先,HTML部分是构建用户界面的基础。你需要创建三个`<select>`元素,分别代表省、市、区。每个`<select>`元素都需要一...
在实际应用中,"三级联动"不仅限于地理位置的选择,还可以应用于其他多级分类的场景,如商品分类、部门结构等。理解并掌握这种源码有助于开发者提升动态数据交互和用户体验的设计能力。同时,对于初学者来说,研究...
在Android开发中,"三级联动省市联动多级联动"是一个常见的需求,特别是在电子商务、物流配送等领域,用户需要选择他们的收货地址,这通常涉及到国家、省份、城市等多层次的选择。这个压缩包文件提供了实现这一功能...
"JS 实现 三级、多级联动"是指使用JavaScript编程语言来创建一个能够处理多级选择的交互功能,例如在商品分类、地区选择等场景下,用户在一个下拉框中选择一个选项后,下一个下拉框会根据前一个选项的值动态更新其...
JavaScript全国三级联动是一种常见的前端开发技术,主要用于实现地区选择、多级分类等功能。在这个场景下,用户可以从一个下拉菜单中选择省份,接着选择城市,最后确定区县,这三个级别之间存在着联动关系,即选择一...
在网页开发中,"三级联动"是...总的来说,"js实现三级联动展现"是一个综合运用JavaScript动态操作DOM、XML数据解析以及AJAX异步通信的实际案例。这种技术在现代网页开发中广泛应用,对于提升用户交互体验有着重要作用。
本示例中提到的"简单的vue三级联动下拉框代码"是Vue.js应用场景的一个常见实例,常用于构建复杂的表单组件,如地区选择、商品分类筛选等。 一、Vue.js 三级联动下拉框基础概念 1. Vue.js:Vue.js 是一套用于构建...
【jsp+ajax 三级联动菜单】是一个典型的Web开发技术应用场景,它主要利用JavaServer Pages(JSP)和Asynchronous JavaScript and XML(AJAX)来实现动态网页中的数据交互和页面更新。在这个例子中,我们看到的是一个...
本项目"纯js实现ajax无刷新三级联动"旨在利用JavaScript和Ajax技术,无需页面整体刷新即可实现多级选择联动效果,这种效果常见于下拉菜单的联动筛选中。在描述中提到,此项目使用了JSON格式进行数据交换,这有助于...
总结起来,这个ASP三级联动实例展示了如何结合ASP、数据库连接、JavaScript和CSS来创建一个动态的、交互式的多级选择系统。这种技术在现代Web开发中仍然有其应用价值,尤其是在处理需要多级分类的数据时。
在实现省市区三级联动时,我们主要利用`layui-form-select`来创建下拉菜单,并通过JavaScript进行动态更新。 1. **HTML结构** 创建三个`layui-form-select`元素,分别代表省份、城市和区县。每个下拉菜单都有一个...
### 知识点一:Bootstrap框架及其在省市区三级联动中的应用 Bootstrap是一套流行的前端框架,由Twitter的设计师和开发人员开发。它基于HTML、CSS和JavaScript,旨在简化网站的响应式和移动设备开发。Bootstrap提供...
本知识点主要探讨如何在ECharts中实现全国-省-市三级联动的地图效果,以及如何通过提供的示例进行理解和实践。 首先,"echarts扩展全国-省-市三级联动"是指在ECharts图表中,用户可以通过选择省份来动态加载并显示...
在Android开发中,"三级联动省市联动多级联动"是一个常见的需求,特别是在构建涉及地理位置选择的应用或服务时。这个概念通常指的是用户通过选择省份、城市和区县来精确指定一个位置,这三个级别逐级联动,即选择某...
总的来说,PHP实现的三级或四级联动是一个常见的Web开发技术,它能够提供良好的用户体验,让用户在多级选项中快速找到目标。在实际项目中,这有助于简化复杂数据的筛选和输入过程。如果你对这个主题感兴趣,可以通过...
这样做可以让我们在模板中编写自己的HTML和JavaScript来实现三级联动的功能。 在后端的`views`部分,文章提到了三个函数:`choose_province`、`choose_city`和`choose_district`。这三个函数分别用于获取省份列表、...
在网页设计中,"三级联动菜单"是一种常见的交互元素,特别是在复杂的网站导航系统中,它能够帮助用户高效地浏览和定位信息。三级联动菜单通常指的是一个包含主菜单、子菜单和孙菜单的多层次下拉菜单结构,用户在选择...
具体到这个名为"二级联动三级联动.rar"的压缩包文件,由于未提供具体的文件内容,我们可以假设它包含了一个示例项目,用于演示如何使用JavaScript实现这种联动效果。通常,这样的项目可能包含HTML文件(用于结构),...