【js】【demo】多级联动选择标签 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    
    <script type="text/javascript" src="W:/code/PetsMall/PetsMall/trunk/PetsMall20220321/PetsMall.Admin/Scripts/jquery-3.4.1.min.js"></script>
    <script>
    //js-多级联动选择标签demo,页面：<div name="tagParentId0"></div>
    //设置标签html，标签格式[{TagId,Title,Content,ParentTagId,ChildList}]
    var s;
    var TagsSet = function (data) {
        for (var i = 0; i < data.length; i++) {
            var x = data[i];
            s=TagGetHtml(x);
            $("[name='tagParentId0']").append(s);
        }
        //绑定下拉选择框改变事件
        $("[name='tagSelect']").bind("change", ShowTags);
    }
    //获取标签html内容
    var TagGetHtml = function (e,isShow) {
        var html = '';
        if (e && e.ChildList && e.ChildList.length > 0) {
            html += '<div class="tagDiv tag' + e.TagId + ' ParentTagId_' + e.ParentTagId + '"' + (e.ParentTagId == 0 || isShow ? '' : 'style="display: none;"') + '>';
            html += '<div class="form-group"><label class="control-label col-md-2 col-sm-2 col-xs-2">' + e.Title + '：</label>';
            html += '<span>';
            html += '<select name="tagSelect" class="form-control addtag" onchange="ShowTags">';
            for (var i = 0; i < e.ChildList.length; i++) {
                var x = e.ChildList[i];
                //json中是双引号，所以value等号后为单引号才行
                html += "<option class='optionTag" + x.TagId + "' value='" + JSON.stringify(x) + "'>" + x.Title + "</option>";
            }
            html += "</select>";
            html += "</span>";
            html += '</div>';
            for (var i = 0; i < e.ChildList.length; i++) {
                var x = e.ChildList[i];
                html += TagGetHtml(x,i==0);
            }
            html += '</div>';
        }
        return html;
    }
    //选择框改变事件，显示子级或执行选中业务
    var ShowTags = function () {
        console.log($(this));
        var e = $(this).children("option:selected").val();
        //值是对象字符串
        if (e.indexOf("{") == 0) {
            var v = JSON.parse(e);
            if (v.ChildList && v.ChildList.length > 0) {
                //隐藏其他自己，显示选中标签的子级
                $(this).parent().parent().parent().children(".tagDiv").hide();
                $(".tag" + v.TagId).show();
            } else {
                //执行选中业务
                AddCopy(v.Content);
            }
        } else {
            //执行选中业务
            AddCopy(v);
        }
    }
    //选择框选中后执行业务
    var AddCopy = function (v) {
        if (v) {
            console.log(v);
        }
    }
    //test
    var test=function(){
        var data=[{"ChildList":[{"ChildList":[{"ChildList":[{"ChildList":null,"TagId":19,"Title":"c1c1c1c1","Content":"c1c1c1c1","Type":0,"Sort":1,"ParentTagId":13},{"ChildList":null,"TagId":20,"Title":"c1c1c1c2","Content":"c1c1c1c2","Type":0,"Sort":2,"ParentTagId":13}],"TagId":13,"Title":"c1c1c1","Content":"c1c1c1","Type":0,"Sort":1,"ParentTagId":2},{"ChildList":[{"ChildList":null,"TagId":21,"Title":"c1c1c2c1","Content":"c1c1c2c1","Type":0,"Sort":1,"ParentTagId":14}],"TagId":14,"Title":"c1c1c2","Content":"c1c1c2","Type":0,"Sort":2,"ParentTagId":2}],"TagId":2,"Title":"测试标签1子级1","Content":"c1c1","Type":0,"Sort":1,"ParentTagId":1},{"ChildList":[{"ChildList":[{"ChildList":null,"TagId":22,"Title":"c1c2c1c1","Content":"c1c2c1c1","Type":0,"Sort":1,"ParentTagId":15}],"TagId":15,"Title":"c1c2c1","Content":"c1c2c1","Type":0,"Sort":1,"ParentTagId":3},{"ChildList":[{"ChildList":null,"TagId":17,"Title":"c1c2c2c1","Content":"c1c2c2c1","Type":0,"Sort":1,"ParentTagId":16},{"ChildList":null,"TagId":18,"Title":"c1c2c2c2","Content":"c1c2c2c2","Type":0,"Sort":2,"ParentTagId":16}],"TagId":16,"Title":"c1c2c2","Content":"c1c2c2","Type":0,"Sort":2,"ParentTagId":3}],"TagId":3,"Title":"测试标签1的2","Content":"c1c2","Type":0,"Sort":2,"ParentTagId":1},{"ChildList":null,"TagId":4,"Title":"c1c3","Content":"c1c3d","Type":0,"Sort":3,"ParentTagId":1},{"ChildList":null,"TagId":5,"Title":"c1c4","Content":"c1c4d","Type":0,"Sort":4,"ParentTagId":1},{"ChildList":null,"TagId":12,"Title":"c1c5","Content":"c1c5","Type":0,"Sort":5,"ParentTagId":1}],"TagId":1,"Title":"检测标签1","Content":"c1c1","Type":0,"Sort":1,"ParentTagId":0},{"ChildList":[{"ChildList":null,"TagId":11,"Title":"123","Content":"","Type":0,"Sort":1,"ParentTagId":8},{"ChildList":null,"TagId":9,"Title":"ALEX测试","Content":"测试测试测试测试测试测试车测试测试菜市场","Type":0,"Sort":2,"ParentTagId":8}],"TagId":8,"Title":"标签做什么用","Content":"","Type":0,"Sort":1,"ParentTagId":0},{"ChildList":null,"TagId":10,"Title":"信息新增","Content":"测试测试测试测试测试车","Type":0,"Sort":1,"ParentTagId":0},{"ChildList":[{"ChildList":null,"TagId":7,"Title":"c2c2","Content":"c2c2","Type":0,"Sort":1,"ParentTagId":6}],"TagId":6,"Title":"c2c0","Content":"c2c0d","Type":0,"Sort":2,"ParentTagId":0}];
        TagsSet(data);
    }

    $(function(){
        test();
    });
</script>

</head>
<body style="margin:0px;height:900px;width:900px">
    <div name="tagParentId0">
    </div>
</body>
</html>

 

posted @ 2022-09-13 16:55  lanofsky  阅读(73)  评论(0)    收藏  举报