基于JQUERY的多级联动代码_Javascript教程-查字典教程网
基于JQUERY的多级联动代码
基于JQUERY的多级联动代码
发布时间:2016-12-30 来源:查字典编辑
摘要:jquery.select.more.js复制代码代码如下:(function($){$.fn.doselectmore=function(...

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">

<>

<script src="jquery.select.more.js" type="text/javascript"/></script>

<>

<input type="text" name="illegbasinfo">

</pre>

js:

<pre name="code">

/**

一下※为必填项,★为二选一,?为不是必须

※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">

$("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">

$("input[name=test2]").click(function(){

$("input[name=illegbasinfo]").setselectmoreval(347);

});

</pre>

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类