基于JQUERY的多级联动代码

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>