<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>下拉列表选择移动组件(jquery)</title> </head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script language="javascript"> jQuery(function(){ //初始化 $.zSelect.init("+"); //删除 $("#tol").click(function(){$.zSelect.moveOpt("#ropt","#lopt")}); //添加 $("#tor").click(function(){$.zSelect.moveOpt("#lopt","#ropt")}); //折叠 $(".pf").die().live("click",function(){$(this).fold()}) //子集选中 $("dd").click(function(){$(this).bgchange()}); //父级选中 $(".pt").die().live("click",function(){$(this).bgchange(1)}); }) </script> <style type="text/css"> .listitem{height:8em;font-size:0.8em; position:relative;top:100px;left:100px;} .listitem .lists{width:10em; height:8em;overflow:auto; border:#666666 1px solid; float:left} .listitem .btn{float:left;padding:2em;} .listitem a{text-decoration:none;color:#000000} .lists dl,dt,dd{margin:0} .lists .pt{display:inline-block;width:7em} .lists .pf{display:inline-block;border:#999999 1px solid;font-size:0.7em;color:#999999;padding:0 0.3em} .bgc{background:#6699FF} </style> <body> <div class="listitem"> <!--左边列表--> <div id="lopt" class="lists"> <dl> <dt id="d_1" value="1" pid=""> <a class="pf" href="###">-</a><label class="pt">北京</label> </dt> <dd id="d_7" value="7" pid="1">——朝阳</dd> <dd id="d_3" value="3" pid="1">——海淀</dd> <dd id="d_4" value="4" pid="1">——丰台</dd> </dl> <dl> <dt id="d_2" value="2" pid=""> <a class="pf" href="###">-</a><label class="pt">河北</label> </dt> <dd id="d_5" value="5" pid="2">——保定</dd> <dd id="d_6" value="6" pid="2">——沧州</dd> <dd id="d_8" value="8" pid="2">——涿州</dd> </dl> </div> <!--操作按钮--> <div class="btn"> <input type="button" value=">>" id="tor" /><br/><br/> <input type="button" value="<<" id="tol" /> </div> <!--右边列表--> <div id="ropt" class="lists"> </div> </div> </body> </html> <script language="javascript"> //组件 (function($){ $.fn.extend({ bgchange:function(p){//选中 var $pa = p ? $(this).parent() : $(this); if($pa.hasClass("bgc")){ $pa.removeClass("bgc"); }else{ $pa.addClass("bgc"); } }, fold:function(){//折叠 var t = $(this).text(); var $d = $(this).parent().nextAll(); if(t == "-"){//展开操作 $d.hide(); $(this).text("+"); }else{//折叠操作 $d.show(); $(this).text("-"); } } }) //===============移动============== $.zSelect = { init:function(t){//初始化 if(t == "-"){ $(".pf").text("-"); $("dd").show(); }else{ $(".pf").text("+"); $("dd").hide(); } }, moveOpt:function(f,t){//f 来 t去 var $f = $(f).find(".bgc"); var fv = ""; var fpid = ""; var $td = new Object;// var $fp = new Object;//来源的父级元素 var $fc = new Object;//来源的子元素 var fti = "#d_"; $.each($f,function(k, v){ fpid = $(v).attr("pid"); if(fpid){ $fc = $(f).find('dd[pid="'+fpid+'"]'); $fp = $(f).find(fti+fpid); $td = $(t).find(fti+fpid); if($fc.length <= 1){ $fp.remove();} if($td.length > 0){//父级存在 $td.after(v); }else{//创建父级 $fp = $fc.length > 1 ? $fp.clone() : $fp; $("<dl>").append($fp).append(v).appendTo($(t)); } }else{//父级元素 $td = $(t).find(fti+$(v).attr("value")); $fc = $(v).parent(); if($td.length > 0){//替换 $td.after($fc.children("dd")); $td.replaceWith(v); }else{ $fc.appendTo($(t)); } } }) return false; } } })(jQuery) </script>