基于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 相关文章推荐
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
js中作用域的实例解析
2017/03/16 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
Python实现文件按照日期命名的方法
2015/07/09 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
numpy基础教程之np.linalg
2019/02/12 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
电子商务专业实习生自我鉴定
2013/09/24 职场文书
大专应届生个人的自我评价
2013/11/21 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
先进集体获奖感言
2014/02/13 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
刑事起诉书范文
2015/05/19 职场文书
三下乡活动心得体会
2016/01/23 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
Python Socket编程详解
2021/04/25 Python