html级联选择器,jquery实现 级联选择器

看到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 真正的写的时候 我会多起几个类名；