基于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 相关控件的事件操作分解
Aug 03 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
微信小程序 生命周期函数详解
May 24 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
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 分页分组类
2009/12/10 PHP
PHP中的替代语法简介
2014/08/22 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
python字符串的方法与操作大全
2018/01/30 Python
PyQT实现多窗口切换
2018/04/20 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
美国知名生活购物网站:Goop
2017/11/03 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
医药个人求职信范文
2014/01/29 职场文书
安全承诺书范文
2014/03/26 职场文书
教研处工作方案
2014/05/26 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
平安建设汇报材料
2014/12/29 职场文书
高中生军训感言
2015/08/01 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
virtualenv隔离Python环境的问题解析
2022/06/21 Python