基于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 相关文章推荐
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
ES6箭头函数和扩展实例分析
May 23 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 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(1)
2006/10/09 PHP
PHP操作数组相关函数
2011/02/03 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
预备党员政审材料
2014/02/04 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers