父类子类选择 

<!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="width: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>

 

posted @ 2015-03-19 16:47  goldenstones  阅读(327)  评论(0)    收藏  举报