<!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{width:200px;height:30px;line-height: 30px;margin: 20px auto;}
.box span{display: block;width: 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> Shanghai </ li>
<Li> Guangzhou </ li>
<li>深圳</li>
<Li> Hangzhou </ 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. Set the default display of index entries
where index = 2;
// By default the index, set the default content
ospan.innerHTML = ali[index].innerHTML;
// drop-down menu of the current item
setActive();
// 2. Set drop-down menu is displayed or hidden status: 0 is displayed, a hidden
var i = 0;
1. // bind the click event display box
ospan.onclick = function(eve){
// 5. prevent the event from bubbling
eve.stopPropagation();
// The status display or hide, and do not forget to change state
if(i == 0){
oul.style.display = "block";
// 9. Each time according to the latest index set to open when the current item
setActive();
i = 1;
}else{
oul.style.display = "none";
i = 0;
}
}
// 4. Click the blank to hide, but do not forget to change state
document.onclick = function(){
oul.style.display = "none";
i = 0;
}
for(var j=0;j<ali.length;j++){
8. // advance to the li bound indexed, easy to set the index back
ali[j].index = j;
// 7. rollover events li
ali[j].onmouseover = function(){
// Cancel all display the current
for(var k=0;k<ali.length;k++){
ali[k].className = "";
}
// Note: this is mouse over the elements
this.className = "active";
}
// 8.li click event
ali[j].onclick = function(){
// set the content
ospan.innerHTML = this.innerHTML;
// modify the index
index = this.index;
}
}
// Function 1: index is set according to the current item
function setActive(){
for(var k=0;k<ali.length;k++){
ali[k].className = "";
}
ali[index].className = "active";
}
</script>
</html>