二级联动选择框-CSDN博客

.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);
复制代码

})