求点击下拉框取text值和value值的方法

Question

 <div class="select-box">
  <div class="input-group-prepend">
    <input class="search-cat" type="hidden" name="cat" value="" readonly="" autocomplete="off">
    <span class="select-text">全部</span>
  </div>
  <ul class="select">
    <li value="">全部</li>
    <li class="cat" value="1">分类一</li>
    <li class="cat" value="3">分类二</li>
    <li class="cat" value="4">分类三</li>
    <li class="cat" value="5">分类四</li>
  </ul>
</div>

请问
点击select 展开
展开后点击某一个分类
比如点击的分类一 那么把<span class="select-text">全部</span> 这里的全部替换 成分类一
同时替换 input的value值 变成 value="1"

Answer 1

原生js，jq和vue会更简单点

document.querySelector('.select').addEventListener('click', function(e){
    if(e.target.tagName === 'LI'){
        var text = e.target.innerHTML
        var value = e.target.getAttribute('value')
        //console.log(text, value)
        document.querySelector('.search-cat').value = value
        document.querySelector('.select-text').innerHTML = text
    }
})

Answer 2

//拿到select对象：
var myselect = document.getElementById("select");
var myspan =document.getElementById("span");
// 监听change 事件
myselect.onchange = function(){
  //拿到选中项的索引：
  var index = myselect.selectedIndex;
  // selectedIndex代表的是你所选中项的index
  //拿到选中项options的value/text：
  myspan.innerHTML = myselect.options[index].text
}