<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>父类子类选择</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <style type="text/css"> .topointer{cursor:pointer} </style> <div id="fl" style="500px; line-height:20px;"><span id="fl_1" class="topointer" onClick="load_son('fl_1','fl_1_son',1)">建筑（公建）</span> <span id="fl_2" class="topointer" onClick="load_son('fl_2','',1)">建筑（居住）</span></div> <div id="fl_1_son" style="display:none"> <span id="fl_1_1" class="topointer" onClick="load_son('fl_1_1','',1)">医疗建筑</span> <span id="fl_1_2">观演建筑</span> </div> <input type="text" id="test" name="test" width="100px"> <!--选中后再存储的数据--> <div id="fenlei_todel" style="display:none;"> <div id="todel_1"></div> <div id="display_1"></div> </div> <script type="text/javascript"> //id(分类ID,以数字结尾如fl_1),sonid子分类divID(如fl_1_son)，待处理分类组ID（如第一组分类 id="fl"为1） function load_son(id,sonid,idtodeal){ if(sonid!='') var sonobj = $("#"+sonid); var nowobj = $("#"+id); var inputobj = $("#test"); var now_text = nowobj.html(); var input_val = inputobj.val(); var add_text = now_text+'，'; var todelobj = $("#todel_"+idtodeal); var displayobj = $("#display_"+idtodeal); var todeltext = todelobj.html(); var displaytext = displayobj.html(); if(nowobj.attr("isclick") != '1'){ if(todeltext.length>0){ todelarr = todeltext.split(','); $.each(todelarr,function(k,v){ var fid = nowobj.parent().attr("id"); if(fid && v==fid.replace('_son','')){ return false; } $("#"+v).attr('isclick',''); $("#"+v).css({background:'white'}); inputobj.val(input_val.replace($("#"+v).html()+'，','')); input_val = inputobj.val(); todelobj.html(todeltext.replace(v+',','')); todeltext = todelobj.html(); } ) } if(displaytext.length>0){ displayarr = displaytext.split(','); $.each(displayarr,function(k,v){ var fid = nowobj.parent().attr("id"); if(fid && v==fid){ return false; } $("#"+v).hide(); displayobj.html(displaytext.replace(v+',','')); displaytext = displayobj.html(); } ) displaytext = ''; } if(sonid!='') sonobj.show(); nowobj.attr("isclick",'1'); nowobj.css({background:'#cccccc'}) inputobj.val(input_val+add_text); todelobj.html('');//为什么必须加个‘’ todeltext = todeltext+id+','; todelobj.html(todeltext); if(sonid!='') displayobj.html(displaytext+sonid+','); }else{ if(sonid!='') sonobj.hide(); nowobj.attr('isclick',''); nowobj.css({background:'white'}); inputobj.val(input_val.replace(add_text,'')); todelobj.html(todeltext.replace(id+',','')); if(sonid!='') displayobj.html(displaytext.replace(sonid+',','')); } } //需要消除的选项为当前ID子分类，兄弟分类（含兄弟分类的子分类） //判断是子分类或者兄弟分类，兄弟分类的子分类消除 function isson(nowid,todelid){ //todo } </script> <!-- onload(); --> </body> </html>