senton
- 浏览: 200448 次
- 性别:
- 来自: 紫禁城
-
文章分类
最新评论
-
a1439226817：
<!doctype html><html l ...
发布一个支持N级下拉列表联动的控件 -
a1439226817：
也不高个测试的demo，别人怎么用啊
发布一个支持N级下拉列表联动的控件 -
davaidgao：
不全啊，这是
Spring3.x权威开发指南 -
caizi12：
对于map绑定很是不方便，现在的做法，需要创建一User类，再 ...
浅谈 SpringMVC 数据绑定 -
joeyhuang：
不全啊..
Spring3.x权威开发指南
最近，由于工作的需要，写了一个联动下拉列表控件，理论上支持N级联动，后台可以使用java的Spring3 MVC的@ResponseBody标注来返回数据(我现在的项目就是使用这种方法)或者，也可以使用其他方式，只要返回的数据格式为json就行，且不局限于java语言代码中。
写的不好的地方，请大家多指教，哪位朋友有好的建议也可以修改并贴出来与大家共享。
有兴趣的朋友可以更进一步的增强：譬如缓存一些数据到客户端，支持不调用后台的获取数据的方式，等等。
废话不说了，直接贴代码：
写的不好的地方，请大家多指教，哪位朋友有好的建议也可以修改并贴出来与大家共享。
有兴趣的朋友可以更进一步的增强：譬如缓存一些数据到客户端，支持不调用后台的获取数据的方式，等等。
废话不说了，直接贴代码：
/**
* LinkedSelect: 联动下拉框控件，支持N级联动。
* 根据每个Select的定义中的url和id为Select做初始化，后台返回的数据为[{value:"",label:""},{value:"",label:""}]形式的数组json
* @author senton
* @version 1.0
*
* 以选国家、省、市的联动为例，调用示例如下：
* <pre>
* // 声明一个select变量
* var select = new LinkedSelect();
* // 调用selct的init()方法，注意，该方法的参数是一个数组，用[]括起来，每个select的定义用{}括起来，多个select定义之间以,分割
* select.init([
* {
* id:"country",
* url:"获取country列表的url",
* nullable:false,
* defaultValue:2
* },
* {
* id:"province",
* url:"获取province列表的url",
* nullable:false
* },
* {
* id:"city",
* url:"获取city列表的url",
* nullable:false
* }
* ]);
* </pre>
*/
/**
* 定义一个LinkedSelect函数
*/
function LinkedSelect(){
return this;
}
/**
* LinkedSelect的初始化方法
* @param allSelectInputs 所有的需要联动显示的下拉框，是一个数组。
* @returns
*/
LinkedSelect.prototype.init = function(allSelectInputs){
// 定义一个内部方法，用于加载一个下拉框，参数：
// allSelectInputs：所有的下拉框定义
// parentId: 上一个被选中的ID，即<option>的value属性值
// currentIndex: 要初始化的下拉框在allSelectInputs中的索引
initNextSelect = function(allSelectInputs, parentId, currentIndex){
// 如果没有allSelectInputs值或者allSelectInputs的长度小于等于currentIndex，说明没有需要初始化的下拉框了，就返回
if(!allSelectInputs || allSelectInputs.length <= currentIndex){
return;
}
// 取出当前需要初始化的select的定义
var currentSelect = allSelectInputs[currentIndex];
// 清空currentSelect的option
$("#"+currentSelect.id).empty();
// 如果还有下一个，则为当前的Select加上onchange事件
if(allSelectInputs.length > currentIndex + 1){
$("#"+currentSelect.id).unbind("change");
$("#"+currentSelect.id).bind("change", function(){
initNextSelect(allSelectInputs, $(this).val(), currentIndex + 1);
});
}
// 如果不是第一个，则需要判断parentId是否为空，如果为空，则递归清空后面的所有下拉框
if(currentIndex != 0){
if(!parentId || parentId == ''){
$("#"+currentSelect.id).append("<option value=''></option>");
initNextSelect(allSelectInputs, $("#"+currentSelect.id).val(), currentIndex + 1);
return;
}
}
// 如果不为空，则根据parentId取出所有的SelectItem初始化currentSelect
$.post(currentSelect.url,
{
parentId:parentId
},
function(data){
// 如果currentSelect在被定义时nullable为true，则说明可以为空，在第一个加上一个空的option
if(currentSelect.nullable){
$("#"+currentSelect.id).append("<option value=''></option>");
}
// 取出所有的selectItem加到currentSelect上
$.each(data, function (index, selectItem) {
// 如果currentSelect在被定义时的defaultValue等于当前selectItem的值，则选中它
if(selectItem.value == currentSelect.defaultValue){
$("#"+currentSelect.id).append("<option selected='selected' value='" + selectItem.value + "'>" + selectItem.label + "</option>");
}
else {
$("#"+currentSelect.id).append("<option value='" + selectItem.value + "'>" + selectItem.label + "</option>");
}
});
// 初始化完毕后，取出当前currentSelect选中的值，作为parentId初始化下一个select
initNextSelect(allSelectInputs, $("#"+currentSelect.id).val(), currentIndex + 1);
},"json"
);
};
// 调用initNextSelect，启动第一个下拉框的加载
initNextSelect(allSelectInputs, "", 0);
};
- linkedSelect.rar (1.6 KB)
- 下载次数: 39
分享到：
评论
2 楼
a1439226817
2014-11-27
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript" src="linkedSelect.js">
</script>
<title>Document</title>
</head>
<body>
<select name="country" id="country">
</select>
<select name="province" id="province">
</select>
<select name="city" id="city">
</select>
<script type="text/javascript">
var data1= [{value:"1",label:"1"},{value:"2",label:"2"}];
var data2= [{value:"1",label:"1"},{value:"2",label:"2"}];
var data3= [{value:"1",label:"1"},{value:"2",label:"2"}];
var select = new LinkedSelect();
select.init([
{
id:"country",
url:data1,
nullable:false,
defaultValue:2
},
{
id:"province",
url:data2,
nullable:false
},
{
id:"city",
url:data3,
nullable:false
}
]);
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript" src="linkedSelect.js">
</script>
<title>Document</title>
</head>
<body>
<select name="country" id="country">
</select>
<select name="province" id="province">
</select>
<select name="city" id="city">
</select>
<script type="text/javascript">
var data1= [{value:"1",label:"1"},{value:"2",label:"2"}];
var data2= [{value:"1",label:"1"},{value:"2",label:"2"}];
var data3= [{value:"1",label:"1"},{value:"2",label:"2"}];
var select = new LinkedSelect();
select.init([
{
id:"country",
url:data1,
nullable:false,
defaultValue:2
},
{
id:"province",
url:data2,
nullable:false
},
{
id:"city",
url:data3,
nullable:false
}
]);
</script>
</body>
</html>
1 楼
a1439226817
2014-11-27
也不高个测试的demo，别人怎么用啊
发表评论
-
Tomcat内存溢出的三种情况及解决办法分析
2010-08-23 16:30 775Tomcat内存溢出的原因 在生产环境中to ... -
web.xml元素介绍
2010-08-23 16:27 867每一个站的WEB-INF下都有一个web.xml的设定文件，它 ... -
什么是交互设计(Interaction Design)？
2009-02-11 09:16 1335什么是交互设计(Interaction Design)？ ... -
Alan Cooper 的交互设计观（转载）
2009-02-11 09:23 900Alan Cooper 的交互设计观 ... -
界面设计规则和规范
2009-02-11 09:38 822界面设计规则和规范 ... -
UI设计流程
2009-02-11 09:41 689UI设计流程 ... -
用户界面设计的技巧与技术
2009-02-11 09:43 650用户 ... -
UI设计，仅是画张图吗？
2009-02-11 09:44 1055UI设计，仅是画张图吗？ ... -
软件界面设计要素
2009-02-11 09:51 748软件界面设计要素 界 ... -
GUI设计禁忌书摘
2009-02-13 10:47 763同一页面包含重复功能的链接或按钮。 将复选框用作单选按钮。 ... -
Tomcat配置和Web应用程序开发
2006-10-05 13:47 800◆tomcat是一个专门用 ... -
HTTP协议精解
2006-10-08 18:46 864WEB服务器和浏览器之间 ... -
Servlet开发基础
2006-10-08 20:48 8181.澄清动态网页和动态HTML网页的区别：动态网页：web服务 ... -
使用Servlet实现动态文件下载
2006-10-12 22:16 2096实现动态文件内容的下载:1.Servlet必须告诉浏览器其所输 ... -
URL编码
2006-10-21 23:24 892什么是URL编码? 当浏览 ... -
JSP简介
2006-10-21 23:26 740JSP是Java Server Page的缩写,通常JSP页 ... -
MVC模式
2006-10-22 07:53 937MVC模式 所谓的MVC模式就是模型-视图-控制器(Model ... -
Session详解
2006-11-01 14:27 553session，中文经常翻译为会话，其本来的含义是指有始有终的 ... -
Tomcat5中文问题解决之道
2006-11-01 14:38 564在tomcat5中发现了以前处理tomcat4的方法不能适 ... -
jsp常用的指令与标签
2006-11-02 21:36 12901.Jsp指令:语法:<%@ 指令名 属性=" ...
相关推荐
二级下拉列表联动 select 网页 html5 学院、专业 选择的下拉列表 下载可用！！！
这个是一个拉列列表的二级联动代码，大家可以参照一下
二级联动 下拉列表 可以进行2级联动下拉等功效 完全的代码 用的时候只需要改改数据库就行了
Access中窗体实现二级联动下拉示范，用VBA配合SQL查询来做rowsource，实现二级下拉跟着一级内容变化，如果一级内容没有选择，二级显示所有
js年月日下拉列表联动,js年月日下拉列表联动,js年月日下拉列表联动,js年月日下拉列表联动
使用ajax实现省,市(县),乡三级下拉列表联动.
带数据库的asp程序的三级联动下拉列表 数据库 三级联动下拉列表 asp
联动下拉控件，客户端
基于Ajax的二级联动下拉列表.rar基于Ajax的二级联动下拉列表.rar基于Ajax的二级联动下拉列表.rar基于Ajax的二级联动下拉列表.rar基于Ajax的二级联动下拉列表.rar
HTML二级联动下拉列表框的实现,如选择 省,市.zip
js实现的三级联动下拉列表 三级关链菜单通用版
servlet+ajax做的两个下拉列表联动（数据从数据库查出后显示到HTML上）
标准 三级联动 下拉列表，分享给大家，一起进步学习！
基于jquery的N级下拉联动，例子里面实现了3级联动，可以自己扩展
ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表
jquery 通用三级联动下拉列表 , 用Jquery实现的三级联动下拉列表插件，压缩包内有多个不同的版本，其实现的基本原理大同小异，无非是调用方式的不同，第一个是通过读取XML构建，支持IE/firefox，chrome不支持，XML...
1、支持PC端级联下拉查询，支持自定义级别，可自由切换层级 2、支持移动端级联下拉查询，支持自定义级别，可自由切换层级 3、一级多选树元件（中继器维护数据） 4、二级多选树元件（中继器维护数据） 5、三级...
插件描述：城市选择下拉四级联动插件. 参考示例：http://www.jq22.com/jquery-info6023
JQuery无刷新省市县三级联动下拉列表功能