设为首页收藏本站
开启辅助访问 广告合作开通会员官方QQ/微信群新人报到处
http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步，快速开始

分布式系统框架(V2.0) 轻松承载百亿数据，千万流量！讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品，爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

苏飞论坛»主页 › 扩展技术 › 前端开发 › jQuery-两级分类选择加赋值可多个同时使用
返回列表 发新帖
查看: 3422|回复: 1

[Jquery] jQuery-两级分类选择加赋值可多个同时使用

[复制链接]
xyc
发表于 2021-6-17 10:23:51 | 显示全部楼层 |阅读模式
   最近开发项目用到了多个不同两级分类选择的问题，自己就动手写了一下，下面是相应的代码，有需要的可以下载源码使用

效果如下
企业微信截图_16238395994958.png

1.css 代码
[CSS] 纯文本查看 复制代码
em{
        font-style: normal;
}

.content{
        position: relative;
}

.inp_cn {
    width: 250px;
    background-color: white;
    border: 1px solid #dcdfe6;
    padding: 0px 16px 0px 6px;
    text-align: left;
    position: relative;
    cursor: pointer;
    margin: 50px auto;
}


.inp_cn .input_checked{
    font-size: 12px;
    color: #595959;
    background: #f2f2f2;
    border-radius: 2px;
    display: inline-block;
    line-height: 20px;
    margin: 2px;
    min-height: 22px;
    max-width: 210px;
    height: auto;
    padding: 0 4px;
    padding-right: 20px;
    position: relative;
}
.inp_cn .input_checked em{
    font-size: 12px;
    cursor:pointer;
    position: absolute;
    right:4px;
    color:#999;
    top: 50%;
    margin-top: -10px;
}

.inp_cn .custom_input:focus {
    border: none !important;
}
.inp_cn .custom_input{
    font-size: 12px;
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    width: auto !important;
    max-width: inherit;
    min-width: 80px;
    vertical-align: top;
    height: 26px;
    color: #34495e;
}
.inp_cn .inp_del{
        position: absolute;
    right: 5px;
    top: 50%;
    font-size: 14px;
    cursor: pointer;
    display: none;
    margin-top: -9px;
}
/*分类*/
.type_menu {
    width: 640px;
    height: 400px;
    background: #fff;
    -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,.35);
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.35);
    border-radius: 2px;
    padding: 16px 0 !important;
    position:absolute;
    z-index:99;
    display: none;
    
}
.type_menu .type_menu_left {
    width: 213px;
    padding: 0 4px;
    border-right: 1px solid #d9d9d9;
    float:left;
    height:100%
}
.type_menu .hierarchy_name {
    font-size: 14px;
    font-weight: 400;
    color: #bfbfbf;
    line-height: 24px;
    padding-left: 12px;
}
.type_menu .type_menu_left .level_type_warp{
    max-height: 345px;
    height:100%;
    overflow-y: auto;
}
.type_menu .type_menu_left .level_type_warp ul{
    font-size: 14px;
    padding-bottom: 10px;
}
.type_menu .type_menu_left .level_type_warp ul li em {
    float:right;
}
.type_menu .type_menu_left .level_type_warp ul li.selected {
    color:#0c83f0;
}
.type_menu .type_menu_left .level_type_warp ul li.currentSelect {
    background-color: #f7f7f7;
    color: #0c83f0;
}

.type_menu  ul li{
    line-height: 30px;
    margin-bottom: 8px;
    padding: 0 12px;
    color: #595959;
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    width:100%;
    position:relative;
    cursor:pointer;
}
.type_menu  ul li.selected span{
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 85%;
    float:left;
}
.type_menu .type_menu_right  ul li{
    width:50%;
    float:left;
    cursor:pointer;
}
.type_menu .type_menu_right ul {
   display:none;
}
.type_menu .type_menu_right ul.active {
   display:block;
}

.type_menu  ul li:hover{
   background-color: #ddedfd;
}
.type_menu .type_menu_left li:hover{
    color:#0c83f0;
}
.type_menu .type_menu_right {
    width:427px;
    padding: 0 4px;
    float:left;
    font-size: 14px;
}
.type_menu .type_menu_right .level_type_warp1{
    max-height: 345px;
    height:100%;
    overflow-y: auto;
}
.type_menu .type_menu_right ul li.selected{
    color:#0c83f0;
}
.type_menu .type_menu_right ul li.selected span{
    width: 90%;
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    float:left;
}
.type_menu .type_menu_right ul li.selected::after{
    position:relative;
    content: "\2713";
    display:block;
    color:#0c83f0;
    float: right;
    font-weight: bold;
}



2.HTML 代码
[HTML] 纯文本查看 复制代码
<div class="content">
                        <div class="inp_cn">
                <div class="inp_box">
                    <span class="down_tit">请选择</span>
                </div>
                <em class="inp_del" >X</em>
            </div>
                </div>
                <div class="type_menu clearfix">
            <div class="type_menu_left">
                <p class="hierarchy_name">一级分类</p>
                <div class="level_type_warp">
                    <ul class="level_type_menu">
                        
                    </ul>
                </div>
            </div>
            <div class="type_menu_right">
                <p class="hierarchy_name">二级分类</p>
                <div class="level_type_warp1">
                   
                </div>
            </div>
        </div>


3.js 代码

[JavaScript] 纯文本查看 复制代码
//点击两级分类弹出框显示
 $(".content").on("click", ".inp_cn", function () {
         $(".inp_cn").removeClass("active");
    $(this).addClass("active");
    var X = $(this).offset().top;
    var Y = $(this).offset().left;
    $(".type_menu").css("top", (X+28) + "px");
    $(".type_menu").css("left", (Y - 180) + "px");
    $(".type_menu").show();
    menuList(allHyName);  //获取分类值并赋值，参数是两级分类的集合
})
//两级分类赋值
function menuList(arr) { //arr -两级分类的集合 
    $(".type_menu .type_menu_right .level_type_warp1").html("");
    $(".type_menu .type_menu_left .level_type_menu").html("");
    $(arr).each(function (idx, item) {
        var items = $(item)[0];
        var typeLists = items.Children;
        var menuArr = "";
        for (var i = 0; i < typeLists.length; i++) {
            if (typeLists[i].ID == 0) {
                menuArr += '<li class="types_item types_item_all" data-id="' + typeLists[i].ID + '"  data-pid="' + items.ID + '"><span>' + typeLists[i].Name + '</span></li>';
            } else {
                menuArr += '<li class="types_item" data-id="' + typeLists[i].ID + '"  data-pid="' + items.ID + '"><span>' + typeLists[i].Name + '</span></li>';
            }
        }
        if (idx == 0) {
            $(".type_menu .type_menu_left .level_type_menu").append('<li class="types_item currentSelect" data-id="' + items.ID + '"><span>' + items.Name + '</span><em></em></li>');
            $(".type_menu .type_menu_right .level_type_warp1").append('<ul class="level_type_menu1 clearfix active"  data-id="' + items.ID + '">' + menuArr + '</ul>');
        } else {
            $(".type_menu .type_menu_left .level_type_menu").append('<li class="types_item" data-id="' + items.ID + '"><span>' + items.Name + '</span><em></em></li>');
            $(".type_menu .type_menu_right .level_type_warp1").append('<ul class="level_type_menu1 clearfix"  data-id="' + items.ID + '">' + menuArr + '</ul>');
        }
    })
    //两级分类一级点击
    $(".type_menu .type_menu_left .level_type_menu li").click(function () {
        var ids = $(this).attr("data-id");
        $(".type_menu .type_menu_right .level_type_menu1").hide();
        $(".type_menu .type_menu_right .level_type_menu1[data-id='"+ids+"']").show();
        $(this).addClass("currentSelect").siblings().removeClass("currentSelect");
        
    })
    //两级分类二级点击
    $(".type_menu .type_menu_right .level_type_menu1 li").click(function () {
        var id = $(this).attr("data-id");
        var pid = $(this).attr("data-pid");
        var e = this;
        if ($(this).hasClass("selected")) {
            $(this).removeClass("selected");
            if ($(this).siblings().hasClass("selected")) {
                $(".type_menu .currentSelect").addClass("selected");
            } else {
                $(".type_menu .currentSelect").removeClass("selected");
            }
            
            $(".inp_cn.active .input_checked[data-id='" + id + "']").remove();
            var ind = $(".type_menu .type_menu_left .level_type_menu li[data-id='" + pid + "'] em").html();
            if (!ind) {
                ind = 0;
            } else {
                ind = parseInt(ind.replace(/[^0-9]/ig, ""));
            }
            if (parseInt(ind) - 1 > 0) {
                $(".type_menu .type_menu_left .level_type_menu li[data-id='" + pid + "'] em").html('(' + (parseInt(ind) - 1) + ')')
            } else {
                $(".type_menu .type_menu_left .level_type_menu li[data-id='" + pid + "'] em").html("");
               
            }
            
            var lenNum = $(".inp_cn.active .inp_box .input_checked").length;
            if (lenNum < 1) {
                $(".inp_cn.active .inp_box .down_tit").show();
                $(".inp_cn.active .inp_del").hide();
            }
           
        } else {
            var str = "";
            var ind = $(".type_menu .type_menu_left .level_type_menu li[data-id='" + pid + "'] em").html();
            if (!ind) {
                ind = 0;
            } else {
                ind = parseInt(ind.replace(/[^0-9]/ig, ""));
            }

            $(".type_menu .type_menu_left .level_type_menu li[data-id='" + pid + "'] em").html('(' + (parseInt(ind) + 1) + ')')
            var name = $(this).children("span").html();
            str = '<span class="input_checked" data-id="' + id + '"  data-pid="' + pid + '"  data-name="' + name + '">' + name + '<em class="input_checked_del">X</em></span>';
            
            $(this).addClass("selected");
            $(".inp_cn.active .inp_box").append(str)
            $(".inp_cn.active .inp_box .down_tit").hide();
            $(".inp_cn.active .inp_del").show();
            $(".type_menu .currentSelect").addClass("selected");

        }
        
       
    })
    //根据所选择赋值到两级分类列表上
    var menu1 = [], menu2 = [];
    $(".inp_box .input_checked").each(function (idx, item) {
        var items = $(item)[0];
        var ids = $(item).attr("data-id");
        var pids = $(item).attr("data-pid");
        menu1.push(pids)
        menu2.push(ids)
    })
    
    for (var z = 0; z < menu2.length; z++) {
        if (menu2[z] > 0) {
            $(".type_menu .type_menu_right .level_type_menu1 li[data-id='" + menu2[z] + "']").addClass("selected");
        } else {
            $(".type_menu .type_menu_right .level_type_menu1 li[data-pid='" + menu1[z] + "'][data-id='"+menu2[z]+"']").addClass("selected");
        }
    }
    for (var z = 0; z < menu1.length; z++) {
        $(".type_menu .type_menu_left .level_type_menu li[data-id='" + menu1[z] + "']").addClass("selected");
        var ind = 0;
        for (var x = 0; x < menu1.length; x++) {
            if (menu1[z] == menu1[x]) {
                if (menu2[z] > 0) {
                    ind++;
                }
            }
        }
        if (ind > 0) {
            $(".type_menu .type_menu_left .level_type_menu li[data-id='" + menu1[z] + "'] em").html("(" + ind + ")");
        }
    }
}
//选择删除
$(".content").on("click", ".input_checked_del", function () {
    var lag = $(this).parent(".input_checked").siblings(".input_checked").length;
    if (lag > 0) {
        $(this).parent().parent(".inp_box").siblings(".inp_del").show();
        $(this).parent().siblings(".down_tit").hide();
    } else {
        $(this).parent().parent(".inp_box").siblings(".inp_del").hide();
        $(this).parent().siblings(".down_tit").show();
    }
    $(this).parent(".input_checked").remove();
})
//选择清空
$(".content").on("click", ".inp_del", function () {
    $(this).siblings(".inp_box").children(".input_checked").remove();
    $(this).siblings(".inp_box").children(".down_tit").show();
    $(this).hide();
    return false;
})
//点击空白处关闭
$(document).click(function () {
    var evt = event.srcElement ? event.srcElement : event.target;
    evt = $(evt);
    
    if (evt.hasClass("type_menu") || evt.parents(".type_menu").length != 0 || evt.hasClass("inp_cn") || evt.parents(".inp_cn").length != 0) {
       
    } else {
        $(".type_menu").hide();
    }
})


选中的所有值，循环.inp_box下的所有.input_checked元素即可！

以上就是全部的代码，如需源码，请点击》》 两级分类选择.zip (34 KB, 下载次数: 0)
jQuery, 分类, 两级分类, 分类选择, 下拉选择

相关帖子



1. 开通SVIP会员，免费下载本站所有源码，不限次数据，不限时间
2. 加官方QQ群，加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
回复

使用道具 举报

站长苏飞
发表于 2021-6-17 14:17:46 | 显示全部楼层
好好好
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-11-25 00:12

© 2014-2021

快速回复 返回顶部 返回列表