基于JQUERY的多级联动代码


Posted in Javascript onJanuary 24, 2012

jquery.select.more.js

(function($){ 
$.fn.doselectmore = function(settings) { 
var dfop ={ 
namekey: "name", 
pnamekey: "name", 
idkey: "id", 
selectname:"sel", 
method: "POST", 
datatype: "json", 
param:{}, 
pval:null, 
chckval:null, 
chckvalarry:null, 
pname:false, 
nname:false, 
vl:0, 
url: false, 
data: false 
}; 
$.extend(dfop, settings); 
// alert(eobj(dfop)); 
var me = $(this); 
if(!dfop.nname){ 
dfop.nname = (dfop.selectname+(dfop.vl+1)); 
} 
if((!dfop.pname)&&dfop.vl>0){ 
dfop.pname = dfop.selectname+(dfop.vl-1); 
} 
if(!dfop.data){ 
if (dfop.url) { 
var param = {}; 
$.ajax({ 
type: dfop.method, 
url: dfop.url, 
data: dfop.param, 
dataType: dfop.datatype, 
success: function(data){ 
dfop.data=data; 
selectmorebuilder(me,dfop); 
}, 
error:(function(request,status,err){ 
var errText = request.responseText; 
var ErrMessage = "页面出现"+request.status+"错误信息,\n"; 
ErrMessage += "错误内容为:"+request.statusText+"\n"+errText.substring(errText.indexOf("<pre>")+5,errText.indexOf("</pre>")); 
alert(ErrMessage); 
}) 
}); 
} 
}else{ 
selectmorebuilder(me,dfop); 
} 
function selectmorebuilder(thisme,df) { 
if(df.chckval!=null&&df.chckvalarry==null){ 
var pid=df.chckval; 
var k=1; 
df.chckvalarry = new Array(); 
df.chckvalarry.push(pid); 
while(k>0){ 
k=0; 
$.each(df.data, function(i, item){ 
if(item[df.idkey]==pid&&item[df.pnamekey]!=df.pval){ 
pid=item[df.pnamekey]; 
df.chckvalarry.unshift(pid); 
k++; 
} 
}); 
} 
} 
// alert(eobj(df.chckvalarry)); 
var select = $("<select></select>"); 
select.attr({ 
name:df.selectname+dfop.vl, 
id:df.selectname+dfop.vl, 
nname:df.nname, 
pname:df.pname, 
vl:df.vl 
}); 
var sdiv = null; 
if (dfop.vl == 0) { 
sdiv = $("<div></div>"); 
thisme.after(sdiv).remove(); 
sdiv.append("<input type=\"hidden\" name=\"" + df.selectname + "\">"); 
sdiv.append(select); 
sdiv.get(0).t=df; 
}else{ 
thisme.removeselectmore(); 
sdiv = $("input[name="+df.selectname+"]").parent(); 
sdiv.append(select); 
} 
select.empty(); 
var counti = 0; 
$.each(df.data, function(i, item){ 
if(item[df.pnamekey]==df.pval){ 
select.append("<option value='"+item[df.idkey]+"'>"+item[df.namekey]+"</option>"); 
counti++; 
} 
}); 
if (counti == 0) { 
select.remove(); 
} 
else { 
select.change(function(){ 
var nselect = $("#" + $(this).attr("nname")); 
if (nselect.length == 0) { 
nselect = $("<select></select>"); 
sdiv.append(nselect); 
} 
nselect.doselectmore({ 
namekey: df.namekey, 
pnamekey: df.pnamekey, 
idkey: df.idkey, 
selectname: df.selectname, 
param: df.param, 
pval: $(this).val(), 
vl: df.vl + 1, 
chckvalarry:sdiv.get(0).t.chckvalarry, 
data: df.data 
}); 
}); 
if(df.chckvalarry!=null){ 
if(df.chckvalarry.length>=df.vl) 
select.val(df.chckvalarry[df.vl]); 
} 
if(df.vl==1&&df.chckvalarry!=null&&df.chckvalarry[1]!=select.val()){ 
var ddf = sdiv.get(0).t; 
ddf.chckvalarry=null; 
ddf.chckval=null; 
sdiv.get(0).t=ddf; 
} 
select.change(); 
$("input[type=hidden][name="+df.selectname+"]").val($("input[type=hidden][name="+df.selectname+"]").getselectmoreval()); 
} 
} 
}; 
$.fn.getselectmoreval = function(){ 
var me = $(this); 
if(me.size()==0) return; 
var sdiv = me.parent(); 
if(sdiv.size()==0) return; 
var df = sdiv.get(0).t; 
var nselect = $("#" + df.selectname+df.vl); 
var v = null; 
while(nselect.size()>0){ 
v = nselect.val(); 
nselect = $("#" +nselect.attr("nname")); 
} 
return v; 
}; 
$.fn.setselectmoreval = function(idv){ 
var me = $(this); 
if(me.size()==0) return; 
var sdiv = me.parent(); 
if(sdiv.size()==0) return; 
var df = sdiv.get(0).t; 
df.chckval=idv; 
if(idv!=null){ 
var pid=df.chckval; 
var k=1; 
df.chckvalarry = new Array(); 
df.chckvalarry.push(pid); 
while(k>0){ 
k=0; 
$.each(df.data, function(i, item){ 
if(item[df.idkey]==pid&&item[df.pnamekey]!=df.pval){ 
pid=item[df.pnamekey]; 
df.chckvalarry.unshift(pid); 
k++; 
} 
}); 
} 
} 
sdiv.get(0).t=df; 
var nselect = $("#" + df.selectname+df.vl); 
nselect.val(df.chckvalarry[0]); 
nselect.change(); 
}; 
$.fn.removeselectmore = function(){ 
if($(this).attr("nname")!=null){ 
$("#"+$(this).attr("nname")).removeselectmore(); 
} 
$(this).remove(); 
}; 
})(jQuery);

help.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script src="../../common.js" type="text/javascript"></script> 
<script src="../../jquery/jquery-1.3.2.min.js" type="text/javascript"/></script> 
<link type="text/css" rel="stylesheet" href="../SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link> 
<script language="javascript" src="../SyntaxHighlighter/Scripts/shCore.js"></script> 
<script language="javascript" src="../SyntaxHighlighter/Scripts/shBrushJScript.js"></script> 
<script language="javascript" src="../SyntaxHighlighter/Scripts/shBrushXml.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
dp.SyntaxHighlighter.ClipboardSwf = '../SyntaxHighlighter/Scripts/clipboard.swf'; 
dp.SyntaxHighlighter.HighlightAll('code'); 
}); 
</script> 
<title>Insert title here</title> 
</head> 
<body> 
<b>方法名:</b>doselectmore<br/> 
<b>用途:</b>实例化一个对象为多选框<br/> 
<b>例子:</b>html 
<pre name="code" class="html"> 
<!--head--> 
<script src="jquery.select.more.js" type="text/javascript"/></script> 
<!--body--> 
<input type="text" name="illegbasinfo"> 
</pre> 
js: 
<pre name="code" class="js"> 
/** 
一下※为必填项,★为二选一,?为不是必须 
※namekey: 数据类型显示名称, 
※pnamekey: 数据上级主键名称, 
※idkey: 数据主键名称, 
※selectname: 选择框名称, 
※pval:第一级别上级节点值, 
?chckval:默认选择, 
★url: false, 
?param:url使用时传入参数, 
★data: false 
**/ 
$("input[name=illegbasinfo]").doselectmore({ 
url:'../../../abc/dic/illbasinfo/loadall.do', 
pval:0, 
namekey: "illegbasinfo", 
pnamekey: "parillegbasid", 
idkey: "illegbasinfoid", 
selectname:"illegbasinfo" 
}); 
</pre> 
<b>方法名:</b>doselectmore<br/> 
<b>用途:</b>得到选中对象值<br/> 
<b>例子:</b>js: 
<pre name="code" class="js"> 
$("input[name=test1]").click(function(){ 
alert($("input[name=illegbasinfo]").getselectmoreval()); 
}); 
</pre> 
<b>方法名:</b>setselectmoreval(val)<br/> 
<b>用途:</b>为多选框设置值<br/> 
<b>例子:</b>js: 
<pre name="code" class="js"> 
$("input[name=test2]").click(function(){ 
$("input[name=illegbasinfo]").setselectmoreval(347); 
}); 
</pre> 
</body> 
</html>
Javascript 相关文章推荐
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
Angular排序实例详解
Jun 28 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
js实现简单的打印表格
Jan 15 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 #Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 #Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 #Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 #Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 #Javascript
MooBox 基于Mootools的对话框插件
Jan 20 #Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 #Javascript
You might like
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
PHP Google的translate API代码
2008/12/10 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
vue组件间通信解析
2017/03/01 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
在python中做正态性检验示例
2019/12/09 Python
Python数组并集交集补集代码实例
2020/02/18 Python
python字符串判断密码强弱
2020/03/18 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
台湾生鲜宅配:大口市集
2017/10/14 全球购物
一套VC试题
2015/01/23 面试题
linux面试题参考答案(1)
2016/01/22 面试题
班会关于环保演讲稿
2013/12/29 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
电子专业求职信
2014/06/19 职场文书
办公室规章制度范本
2015/08/04 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL