<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义实现select</title>
<style>
div, span, ul, li {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
#box {
width: 200px;
height: 30px;
}
span {
width: 200px;
height: 30px;
border: 1px solid black;
display: block;
line-height: 30px;
text-align: center;
}
.list {
width: 200px;
height: 90px;
display: none;
}
.list li {
width: 200px;
height: 30px;
border: 1px solid black;
border-top: none;
text-align: center;
}
.list .active {
background: #66f;
color: #fff;
}
</style>
</head>
<body>
<div id="box">
<span>上海</span>
<ul class="list">
<li class="active">上海</li>
<li>北京</li>
<li>广州</li>
<li>青岛</li>
<li>杭州</li>
</ul>
</div>
<script>
var olist = document.querySelector(".list")
var ospan = document.querySelector("span");
var ali = document.querySelectorAll(".list li");
var type = 1; // 1为显示，2为隐藏
var index = 0; // 默认索引样式
setActiveStyle();
// 设置选中样式
function setActiveStyle() {
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;
}
}
// 切换下拉框显示or隐藏
function toggleSelectDisplay(isShow) {
if (isShow) {
olist.style.display = "block";
type = 2;
} else {
olist.style.display = "none";
type = 1;
}
}
ospan.onclick = function (eve) {
var e = eve || window.event;
toggleSelectDisplay(type === 1);
setActiveStyle();
stopBubble(e);
}
for (var i = 0; i < ali.length; i++) {
ali[i].itemIndex = i; // 给每个li设置序号
ali[i].onclick = function (eve) {
var e = eve || window.enent;
ospan.innerHTML = this.innerHTML
index = this.itemIndex
}
// 鼠标滑过的样式
ali[i].onmousemove = function (eve) {
var e = eve || window.enent;
index = this.itemIndex
setActiveStyle();
}
// 鼠标离开的样式
ali[i].onmouseout = function (eve) {
var e = eve || window.enent;
this.className = "";
}
}
// 点击空白处，下拉框隐藏
document.onclick = function () {
toggleSelectDisplay();
}
</script>
</body>
</html>
网友评论