senton
- 浏览: 206543 次
- 性别:
- 来自: 紫禁城
-
文章分类
最新评论
-
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 807Tomcat内存溢出的原因 在生产环境中to ... -
web.xml元素介绍
2010-08-23 16:27 909每一个站的WEB-INF下都有一个web.xml的设定文件，它 ... -
什么是交互设计(Interaction Design)？
2009-02-11 09:16 1373什么是交互设计(Interaction Design)？ ... -
Alan Cooper 的交互设计观（转载）
2009-02-11 09:23 948Alan Cooper 的交互设计观 ... -
界面设计规则和规范
2009-02-11 09:38 866界面设计规则和规范 ... -
UI设计流程
2009-02-11 09:41 729UI设计流程 ... -
用户界面设计的技巧与技术
2009-02-11 09:43 683用户 ... -
UI设计，仅是画张图吗？
2009-02-11 09:44 1095UI设计，仅是画张图吗？ ... -
软件界面设计要素
2009-02-11 09:51 781软件界面设计要素 界 ... -
GUI设计禁忌书摘
2009-02-13 10:47 798同一页面包含重复功能的链接或按钮。 将复选框用作单选按钮。 ... -
Tomcat配置和Web应用程序开发
2006-10-05 13:47 832◆tomcat是一个专门用 ... -
HTTP协议精解
2006-10-08 18:46 910WEB服务器和浏览器之间 ... -
Servlet开发基础
2006-10-08 20:48 8601.澄清动态网页和动态HTML网页的区别：动态网页：web服务 ... -
使用Servlet实现动态文件下载
2006-10-12 22:16 2130实现动态文件内容的下载:1.Servlet必须告诉浏览器其所输 ... -
URL编码
2006-10-21 23:24 946什么是URL编码? 当浏览 ... -
JSP简介
2006-10-21 23:26 781JSP是Java Server Page的缩写,通常JSP页 ... -
MVC模式
2006-10-22 07:53 969MVC模式 所谓的MVC模式就是模型-视图-控制器(Model ... -
Session详解
2006-11-01 14:27 589session，中文经常翻译为会话，其本来的含义是指有始有终的 ... -
Tomcat5中文问题解决之道
2006-11-01 14:38 600在tomcat5中发现了以前处理tomcat4的方法不能适 ... -
jsp常用的指令与标签
2006-11-02 21:36 13221.Jsp指令:语法:<%@ 指令名 属性=" ...
相关推荐
“发布一个支持N级下拉列表联动的控件 - JQuery - web - JavaEye论坛”讨论的是使用JQuery实现的多级联动下拉列表，这对于前端界面交互设计来说是一个实用的技巧，尤其在处理复杂表单和数据关联时。 最后，“comet ...
这个场景可以通过创建一个联动的下拉选择器（Spinner）来实现，让用户能够逐级选择省份和城市，并获取到对应的城市编号。下面将详细介绍如何在Android中实现这样的功能。 首先，我们需要准备省份和城市的数据库或...
3. **联动下拉框**: 两个或多个下拉框之间的值相互依赖，改变一个下拉框的值会更新另一个。 4. **文本排序**: 对文本数据进行排序处理。 5. **画图类**: 包括饼图、柱状图、矢量贝塞尔曲线等图形绘制。 6. **客户端...
- **jQuery - LinkedSelect**：创建关联的下拉列表，改变一个下拉框时，另一个下拉框会相应更新。 - **Choose Plugin (Select Replacement)**：美化并增强原生选择框。 ### 表单基本、输入框、选择框等 - **jQuery ...
- 描述：实现一个支持输入搜索的下拉列表。 - 实现方法：使用JavaScript监听用户的输入事件，根据输入内容过滤下拉列表中的选项。 - **2.4 多行文本框中只能输入iMax文字。如果多输入了，自动减少到iMax个文字...
- **Select Combo Plugin**: 结合多个`<select>`元素为一个组合。 - **jQuery-Linked Select**: 实现两个或多个`<select>`元素的关联。 - **Auto-populate multiple select boxes**: 自动填充多选框中的选项。 -...
- **功能概述**：提供另一个颜色选择器选项。 - **应用场景**：适用于需要不同风格的颜色选择器。 #### 六、投票插件（Rating Plugins） **1. jQuery Star Rating Plugin** - **功能概述**：实现星级评分功能。 - ...
` 表示可选的负号，`\d+` 表示一个或多个数字。 - **1.2 大于0的整数验证** - 特别用于ID等必须为正整数的情况。 - 通过正则表达式 `/^[1-9]\d*$/.test(str)` 实现，确保数字大于0。 - **1.3 负整数验证** - 用于...