js下拉框选择图片
二种方式：下拉框里面选项有图片与没有图片
1.用下拉框写 下拉框的option没法添加图片如果下拉框里面不需要图片可以用这种方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
width:25px;
}
</style>
</head>
<body>
<img src="img/index.png"/>
<select >
<option value="img/index.png">首页</option>
<option value="img/logo.png">动漫</option>
<option value="img/select.png">电影</option>
<option value="img/loading.gif">博客</option>
</select>
<script>
var main=document.querySelector("select");
var img=document.querySelector("img");
main.onchange=function(){
img.setAttribute("src",this.value);
}
</script>
</body>
</html>
2.用列表模拟下拉框 下拉框里面需要图片可以用这种方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 250px;
}
.box-item{
height: 50px;
line-height: 50px;
}
.box-item img{
width: 25px;
vertical-align: middle;
}
ul{
display: none;
width: 100%;
list-style: none;
}
li{
height: 30px;
line-height: 30px;
}
li:hover{
background: #FFC0CB;
}
li img{
width:25px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<div class="box-item">
<img src="img/index.png"/>
请选择
</div>
<ul>
<li>
<img src="img/index.png"/>
首页
</li>
<li>
<img src="img/logo.png"/>
首页1
</li>
<li>
<img src="img/index.png"/>
首页2
</li>
</ul>
</div>
<script>
var ul = document.querySelector("ul");
var boxContent = document.querySelector(".box-item");
//点击下拉框显示并阻止冒泡,防止触发document上写的隐藏下拉框函数
boxContent.onclick = function(e) {
var e = e || window.event;
ul.style.display = "block";
e.stopPropagation();
};
//选择选项替换你内容，并隐藏
for(var i=0;i<li.length;i++){
li[i].onclick=function(){
boxContent.innerHTML =this.innerHTML;
ul.style.display = "none";
}
}
//点击document隐藏下拉框 选择框显示但不做选择时点击页面选择框隐藏
document.onclick = function() {
ul.style.display = "none";
}
</script>
</body>
</html>
