<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{200px;height:30px;line-height: 30px;margin: 20px auto;}
.box span{display: block; 200px;line-height: 30px;border: solid 1px black;}
.box ul{margin: 0;padding: 0;list-style: none;overflow: auto;border: solid 1px black;border-top:none;display: none;}
.box ul li{padding: 0 6px;}
.box ul li.active{background: #35f;color: #fff;}
</style>
</head>
<body>
<!-- <select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select> -->
<div class="box">
<span>北京</span>
<ul>
<li class="active">北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
<li>杭州</li>
<li>西安</li>
<li>...</li>
</ul>
</div>
</body>
<script>
var ospan = document.querySelector(".box span");
var oul = document.querySelector(".box ul");
var ali = document.querySelectorAll(".box ul li");
// 6.设置默认显示项的索引
var index = 2;
// 根据默认的索引，设置默认内容
ospan.innerHTML = ali[index].innerHTML;
// 下拉菜单的当前项
setActive();
// 2.设置下拉菜单的显示或隐藏状态：0为显示，1为隐藏
var i = 0;
// 1.绑定显示框的点击事件
ospan.onclick = function(eve){
// 5.阻止事件冒泡
eve.stopPropagation();
// 3.根据状态显示或隐藏，同时别忘记修改状态
if(i == 0){
oul.style.display = "block";
// 9.每次打开时根据最新索引，设置当前项
setActive();
i = 1;
}else{
oul.style.display = "none";
i = 0;
}
}
// 4.点击空白隐藏，同时别忘记修改状态
document.onclick = function(){
oul.style.display = "none";
i = 0;
}
for(var j=0;j<ali.length;j++){
// 8.提前给li绑定索引，方便后面设置索引
ali[j].index = j;
// 7.鼠标经过li事件
ali[j].onmouseover = function(){
// 取消所有，显示当前
for(var k=0;k<ali.length;k++){
ali[k].className = "";
}
// 注意：this就是鼠标经过的元素
this.className = "active";
}
// 8.li的点击事件
ali[j].onclick = function(){
// 设置内容
ospan.innerHTML = this.innerHTML;
// 修改索引
index = this.index;
}
}
// 功能1：根据索引设置当前项
function setActive(){
for(var k=0;k<ali.length;k++){
ali[k].className = "";
}
ali[index].className = "active";
}
</script>
</html>