看到UI在做设计图 有级联选择器 就先写写 (项目还在用jquery~~~~~~)
先上效果图
css
.box{
position: relative;
width: 800px;
height: 800px;
background: #2A363E;
}
.input{
font-size: 20px;
color: #fff;
}
.input>input{
width: 500px;
height: 50px;
font-size: 20px;
color: #fff;
border: 2px solid aqua;
background: #2A363E;
padding:0 10px;
}
.select{
position: absolute;
top: 70px;
left: 475px;
}
.select>ul{
background: #0A1824;
color: #474F55;
width: 140px;
padding: 10px 0;
}
.select>ul::before
{
content: "";
position: relative;
display:inline-block;
top: -23px;
left:90px;
border-bottom: 10px solid #0A1824;
border-right: 10px solid transparent;
border-left: 10px solid transparent
}
.select>ul>li{
position: relative;
}
.select>ul>li>p{
line-height: 30px;
text-align: center;
}
.select>ul>li>ul{
position: absolute;
background: #0A1824;
color: #474F55;
width: 140px;
padding: 10px 0;
left: 155px;
top: -5px;
display:none
}
.select>ul>li>ul::before
{
content: "";
position: absolute;
display:inline-block;
top: 10px;
left:-10px;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-right: 10px solid #0A1824;
}
.select>ul>li>ul>li{
line-height: 30px;
text-align: center;
}
.select>ul>li>ul>li:hover{
color: aqua;
background: #474F55;
}
.select>ul>li>p:hover{
color: aqua;
background: #474F55;
}
html
巡查点位:
变电东区1
东1号位
东2号位
东3号位
东4号位
变电西区2
西1号位
西2号位
西3号位
西4号位
变电南区3
南1号位
南2号位
南3号位
南4号位
变电北区4
北1号位
北2号位
北3号位
北4号位
js
var val = ''
$('.input').on('click', () => {
$('.select>ul').show()
})
$('.select>ul>li>p').on('click', function () {
$(this).css({
color: 'aqua',
background: '#474F55'
}).parent('li').siblings().children('p').css({
color: '#474F55',
background: '#0A1824'
})
val = $(this).text()
$('.input>input').val(val)
$(this).siblings('ul').show()
$(this).parent('li').siblings().children('ul').hide()
})
$('.select>ul>li>ul>li').on('click', function () {
$(this).css({
color: 'aqua',
background: '#474F55'
}).siblings().css({
color: '#474F55',
background: '#0A1824'
})
$('.input>input').val(val + '/' + $(this).text())
$(this).css({
color: '#474F55',
background: '#0A1824'
})
$('.select>ul>li>p').css({
color: '#474F55',
background: '#0A1824'
})
$('.select>ul').hide()
})
注： 真正的使用不要像一样 >>*>没完 还有.parent().siblings().children() 这样没完 我只是写个小dome 真正的写的时候 我会多起几个类名；
如果觉得《html级联选择器 jquery实现 级联选择器》对你有帮助，请点赞、收藏，并留下你的观点哦！
