<!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>
div,span,ul,li{margin: 0;padding: 0;}
ul,li{list-style: none;}
#box{ 200px;height: 30px;}
span{ 200px;height: 30px;border: 1px solid black;display: block;line-height: 30px;text-align: center;}
.list{ 200px;height: 90px;display: none;}
.list li{ 200px;height: 30px;border: 1px solid black;border-top:none;}
.list .active{background: #66f;color: #fff;}
</style>
</head>
<body>
<select>
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="广州">广州</option>
<option value="广州">青岛</option>
</select>
<div id="box">
<span>上海</span>
<ul class="list">
<li class="active">上海</li>
<li>北京</li>
<li>广州</li>
<li>青岛</li>
<li>杭州</li>
</ul>
</div>
</body>
<script>
// html+css+js模拟下拉菜单
var olist = document.querySelector(".list");
var ospan = document.querySelector("span");
var ali = document.querySelectorAll(".list li");
//决定状态 为1时显示，为2时隐藏
var type = 1;
//默认索引样式
var index = 0;
clearActive();
//点击span显示区域的内容
ospan.onclick = function(eve){
var e = eve || window.event;
if(type === 1){
olist.style.display = "block";
clearActive();
type = 2;
}else{
olist.style.display = "none";
clearActive();
type = 1;
}
stopBubble(e);
}
for(var i=0;i<ali.length;i++)
{
//给li绑定索引
ali[i].xuhao = i;
//点击li 下面的点哪个哪个值上去
ali[i].onclick = function(eve){
var e = eve || window.event;
ospan.innerHTML = this.innerHTML;
//每个事件的序号
index = this.xuhao;
}
//点过span后鼠标滑过下面
ali[i].onmousemove = function(eve){
var e = eve || window.event;
index = this.xuhao;
clearActive();
}
//鼠标划出时，取消颜色样式
ali[i].onmouseout = function(eve){
var e = eve || window.event;
this.className = "";
}
}
//点击空白
document.onclick = function(){
olist.style.display = "none";
type = 1;
}
//设置默认样式
function clearActive(){
for(var i=0;i<ali.length;i++)
{
ali[i].className = "";
}
ali[index].className = "active";
}
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
</script>
</html>