基于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 ui 1.7更新小结
Aug 15 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
JsChart组件使用详解
Mar 04 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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生成EAN_13标准条形码实例
2013/11/13 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
JavaScript 事件系统
2010/07/22 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
python实现简单的文字识别
2018/11/27 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
python中doctest库实例用法
2020/12/31 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
linux下进程间通信的方式
2014/12/23 面试题
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
计算机专业自荐信
2013/10/14 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书