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

<div class="box">
    <div class="input">
      <label for="">巡查点位:</label>
      <input type="text" placeholder="请选择巡查点位" disabled>
    </div>
    <div class="select">
      <ul style="display:none">
        <li>
          <p>变电东区1</p>
          <ul>
            <li>东1号位</li>
            <li>东2号位</li>
            <li>东3号位</li>
            <li>东4号位</li>
          </ul>
        </li>
        <li>
          <p>变电西区2</p>
          <ul>
            <li>西1号位</li>
            <li>西2号位</li>
            <li>西3号位</li>
            <li>西4号位</li>
          </ul>
        </li>
        <li>
          <p>变电南区3</p>
          <ul>
            <li>南1号位</li>
            <li>南2号位</li>
            <li>南3号位</li>
            <li>南4号位</li>
          </ul>
        </li>
        <li>
          <p>变电北区4</p>
          <ul>
            <li>北1号位</li>
            <li>北2号位</li>
            <li>北3号位</li>
            <li>北4号位</li>
          </ul>
        </li>
      </ul>
    </div>

  </div>

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