Home  >  Article  >  Web Front-end  >  基于JQUERY的多级联动代码_jquery

基于JQUERY的多级联动代码_jquery

WBOY
WBOYOriginal
2016-05-16 17:56:501002browse

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+"错误信息, ";
ErrMessage += "错误内容为:"+request.statusText+"\n"+errText.substring(errText.indexOf("
")+5,errText.indexOf("
"));
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.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 = $("
");
thisme.after(sdiv).remove();
sdiv.append("");
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("");
counti++;
}
});
if (counti == 0) {
select.remove();
}
else {
select.change(function(){
var nselect = $("#" + $(this).attr("nname"));
if (nselect.length == 0) {
nselect = $("");
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
复制代码 代码如下:












Insert title here


方法名:doselectmore

用途:实例化一个对象为多选框

例子:html
 <br><!--head--> <br><script src="jquery.select.more.js" type="text/javascript"></script> <br><!--body--> <br><input type="text" name="illegbasinfo"> <br>

js:
 <br>/** <br>一下※为必填项,★为二选一,?为不是必须 <br>※namekey: 数据类型显示名称, <br>※pnamekey: 数据上级主键名称, <br>※idkey: 数据主键名称, <br>※selectname: 选择框名称, <br>※pval:第一级别上级节点值, <br>?chckval:默认选择, <br>★url: false, <br>?param:url使用时传入参数, <br>★data: false <br>**/ <br>$("input[name=illegbasinfo]").doselectmore({ <br>url:'../../../abc/dic/illbasinfo/loadall.do', <br>pval:0, <br>namekey: "illegbasinfo", <br>pnamekey: "parillegbasid", <br>idkey: "illegbasinfoid", <br>selectname:"illegbasinfo" <br>}); <br>

方法名:doselectmore

用途:得到选中对象值

例子:js:
 <br>$("input[name=test1]").click(function(){ <br>alert($("input[name=illegbasinfo]").getselectmoreval()); <br>}); <br>

方法名:setselectmoreval(val)

用途:为多选框设置值

例子:js:
 <br>$("input[name=test2]").click(function(){ <br>$("input[name=illegbasinfo]").setselectmoreval(347); <br>}); <br>



Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn