二级联动选择框

.allCon{

    margin-left: 4%;
    /*margin-top: 3%;*/
}

.oneUl{

    border: solid 1px #ddd;
    /*width: 1.45rem;*/
    font-size: 0.16rem;
    text-indent: 0.12rem;
    height:1.5rem;
    float: left;
    overflow: auto;
    background-color: #fff;
    border-radius: 0.05rem;
    padding-right:0.12rem;
}

.oneUl li{

    border-bottom: solid 1px #dddddd;
    line-height: 0.36rem;
    cursor: pointer;
    background-color: #fff;
}

.oneUl li:hover{

    color: #409eff;
}

.selCon{

    width: 2rem;
    height: 0.36rem;
    border: solid 1px #dddddd;
    border-radius:4px ;
    margin-left: 4%;
    margin-bottom: 0.12rem;
    font-size: 0.16rem;
    text-indent: 0.12rem;
    line-height: 0.36rem;
    cursor: pointer;
    background-color: #fff;
}

.selCon:hover{

    border: solid 1px #409eff;
}

 
           <div class="selCon">请选择</div>
           <div class="allCon">
               <ul class="oneUl" id="oneCon1" style="display: none">
                   <li yijiId="5">第一个内容</li>
                   <li yijiId="6">第二个内容</li>
                   <li yijiId="8">第san个内容</li>
               </ul>
               <ul class="oneUl" id="twoCon1" style="display: none">
                   <li erjiId="1">第m个内容</li>
                   <li erjiId="2">第m2个内容</li>
                   <li erjiId="3">第m3个内容</li>
               </ul>
           </div>
//点击出现一级菜单

$(".selCon").click(function () {

    $("#oneCon1").css("display",'block');
    $("#oneCon2").css("display",'block');
});

//存获取的一级菜单id

var yijiId='';

$(".allCon").on('click','#oneCon1 li',function () {

    yijiId=$(this).attr('yijiId');
    console.log(yijiId)
    $.ajax({
        url:'',
        type:'get',
        data:{
            category_id:yijiId,
        },
        success:function(res){
            console.log(res.data)
            var str=''
            for(var i=0;i<res.data.length;i++){
                str+=` <li erjiId="${res.data[i].id}">${res.data[i].name}</li>`
            }
            $("#twoCon1").html(str);
            $("#twoCon1").css("display",'block');
        },error:function(){
            console.log(error)
        }
    })
    //点击的时候请求二级菜单数据并赋值给  #twoCon,同时二级菜单出现
});

var erjiId='';

//点击二级菜单，渲染页面，并关闭弹框

$(".allCon").on('click','#twoCon1 li',function () {

    $("#twoCon1").css("display",'none');
    $("#oneCon1").css("display",'none');
    erjiId=$(this).attr('erjiId');
    console.log(erjiId);
    var con=$(this).html();
    $(".selCon").html(con);
})

//存获取的一级菜单id

$(".allCon").on('click','#oneCon2 li',function () {

    yijiId=$(this).attr('yijiId');
    console.log(yijiId)
    $.ajax({
        url:'',
        type:'get',
        data:{
            category_id:yijiId,
        },
        success:function(res){
            console.log(res.data)
            var str=''
            for(var i=0;i<res.data.length;i++){
                str+=` <li erjiId="${res.data[i].id}">${res.data[i].name}</li>`
            }
            $("#twoCon2").html(str);
            $("#twoCon2").css("display",'block');
        },error:function(){
            console.log(error)
        }
    })
    //点击的时候请求二级菜单数据并赋值给  #twoCon,同时二级菜单出现
});

//点击二级菜单，渲染页面，并关闭弹框

$(".allCon").on('click','#twoCon2 li',function () {

    $("#twoCon2").css("display",'none');
    $("#oneCon2").css("display",'none');
    erjiId=$(this).attr('erjiId');
    console.log(erjiId);
    var con=$(this).html();
    $(".selCon").html(con);
})