二種方式：下拉框里面選項有圖片與沒有圖片
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>