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>
基于JQUERY的多级联动代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@