基于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>