//设置下拉框打开状态,0为关闭,1为打开
var status = 0;
//绑定click事件，用于显示下拉列表
eInput.addEventListener('click',event=>{
  //判断下拉框是否已打开
  if(status){
    //下拉框打开则关闭下拉框
    eUl.style.display = 'none';
    //取消document上的绑定事件
    document.removeEventListener('click',closeUl);
  }else{
    //下拉框关闭则打开下拉框
    eUl.style.display = 'block';
    //在document上绑定点击事件，用于关闭下拉框
    document.addEventListener('click',closeUl,false);
  }
  //修改下拉框状态
  status = +!status;
},false);

//获取下拉选项列表元素的集合
var eLi = eUl.getElementsByTagName('li');
//遍历下拉列表
for(let i=0;i<eLi.length;i++){
  //给每一个li元素绑定点击事件
  eLi[i].addEventListener('click',(event)=>{
    //修改下拉框状态为已关闭状态
    status = 0;
    //清除所有列表的class
    for(let n=0;n<eLi.length;n++){
      eLi[n].className = '';
    }
    //激活当前列表选中样式
    eLi[i].className = 'cur';
    //设置下拉框当前选中值
    eUl.dataset.val = eLi[i].dataset.val;
    //还需要把值设置到原select元素上
    eSelect.value = eUl.dataset.val;
    //触发原select上的函数
    typeof eSelect.onchange=='function'&&select.onchange();
    //修改eInput元素显示的值
    eInput.value = eLi[i].innerHTML;
    //关闭下拉框
    eUl.style.display = 'none';
    //取消document上的绑定事件
    document.removeEventListener('click',closeUl);
  },false);
}

//绑定到document上关闭下拉框的函数
function closeUl(){
  //修改下拉框状态为已关闭状态
  status = 0;
  //关闭下拉框
  eUl.style.display = 'none';
  //取消document上的绑定事件
  document.removeEventListener('click',closeUl);
}

//阻止冒泡，否则点击时冒泡到document上，会导致下拉框刚打开就关闭
eContainer.addEventListener('click',event=>{
  event.stopPropagation();
});