div元素实现select效果

html部分

// 引用select.js  和select.css
 <div id="divselect" class="select_divselect">
        <cite>
          <label class="divselectLabel" value=""></label>
        </cite>
        <div></div>
        <ul class="select_divselect_noradius" style="display:none;">
        </ul>
     </div>

select.css

.select_divselect {
	width: 600px;
	height: 36px;
	padding: 2px 5px;
	border: 1px solid #999;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	position: relative;	
}

.select_divselect cite {
	display: block;
	width: 100%;
	height: 36px;
	line-height: 36px;
	text-align: center;
	position: relative;
}

.select_divselect ul {
	position: absolute;
	z-index: 99;
  width: 100%;
	border: 1px solid #999;
	left: 0px;
	background: #fff;
	top: 41px;
  height: auto;
  max-height: 400px;
	overflow-x: hidden;
  overflow-y: scroll;
  padding: 0;
}
.select_divselect ul li {
	position: relative;
	line-height: 40px;
  border-bottom: 1px solid #ccc;	
  background:  #d3e3fd;
  text-decoration: none;
  list-style: none;
  vertical-align: middle;
  height: 40px;
  cursor: pointer;
}

.select_divselect ul li .audio {
  width: 120px;
  display: inline-block;
  height: 30px;
  margin: 0 10px;
}

.select_divselect ul li .audio audio {
  width: 100%;
  margin-top: 0;
  height: 30px;
  margin-top: 5px;
}

.select_divselect ul li .text {
  display: inline-block;
  line-height: 40px;
  vertical-align: top;
}

.select_divselect ul li .text .tag {
  background: rgba(30, 30, 30, .1);
  border: 1px solid rgba(30, 30, 30, 1);
  padding: 0px 5px;
  margin-right: 5px;
  border-radius: 9px;
}

select.js

setSelectLabel()
// 初始化设置下拉框数据进dom
function setSelectLabel() {
      const data = [
        {label: 'label1', value: 'value1', tags: ['male', 'young', 'crisp']},
        {label: 'label2', value: 'value2', tags: ['male', 'young', 'crisp']},
        {label: 'label3', value: 'value3', tags: ['male', 'young', 'crisp']},
        {label: 'label4', value: 'value4', tags: ['male', 'young', 'crisp']},
      ]
      const sleectId = 'divselect'
      const selectLabel = $('#' + sleectId + ' .divselectLabel')[0];
      selectLabel.setAttribute('value', data[0].value)
      selectLabel.innerText = data[0].label

      let html = ''
      data.forEach(item => {
        let span = ''
        item.tags.forEach(tag => {
          span += `<span class="tag"> ${tag} </span>`
        })
        const s = `
        <li value="${item.value}">
          <div class="text">
            <span class="label"> ${item.label} </span>
            ${span}
          </div>
        </li>
        `
        html += s
      })
      $('#' + sleectId + '>ul')[0].innerHTML = html;
    }


  const sleectId = 'divselect'

  const select = $('#' + sleectId);
  // 下拉框显示隐藏
  select.on('click', (e) => {
    const s = $('#' + sleectId + '>ul')
    if (s.css('display') === 'none') s.css({'display': 'block'})
    else s.css({'display': 'none'})
  })

// 下拉框内行元素点击更新值
  $('#' + sleectId + '>ul>li').on('click', (e) => {
    const labels = e.currentTarget.getElementsByClassName('label')
    const value = e.currentTarget.getAttribute('value')

    const selectLabel = $('#' + sleectId + ' .divselectLabel')[0];

    selectLabel.setAttribute('value', value)
    selectLabel.innerText = labels[0].innerText

    console.log(getSelectValue())
  })

    //  获取下拉框值
    function getSelectValue() {
      const sleectId = 'divselect'
      const selectLabel = $('#' + sleectId + ' .divselectLabel');
      return selectLabel[0].getAttribute('value')
    }