select下拉带图片-模拟下拉
Posted MorningKit
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了select下拉带图片-模拟下拉相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*下拉列表*/
ul,dl,ol,li {list-style: none;}
.dropdown {
float: right;
position: relative;
font-size: 12px;
margin-right:16px;
}
.dropdownbox01 {
width: 250px;
height: 34px;
color: #707070;
line-height: 34px;
border-radius: 4px;
font-size: 16px;
border: 1px solid #dcdcdc;
cursor: pointer;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background: url(images/content_select.png) no-repeat scroll 100px center transparent;
}
.dropdownbox01 span{
margin-left:10px;
width:212px !important;
}
.dropdownbox01 .tac{
text-align: left !important;
}
#dropDownList1 .dropdownbox01 {
width: 120px;
background-position: 96px center;
}
#dropDownList1 .dropdownbox02 li {
width: 250px;
}
.dropdownbox02 {
width:250px;
display: none;
position: absolute;
left: 0px;
top: 32px;
z-index: 1;
background:#fff;
border: 1px solid #dcdcdc;
-webkit-box-shadow: 0 5px 6px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 5px 6px rgba(0, 0, 0, 0.4);
box-shadow: 0 5px 6px rgba(0, 0, 0, 0.4);
max-height: 160px;
overflow-y: auto;
overflow-x: hidden;
}
.dropdownbox02 span{
width:212px !important;
}
.dropdownbox02 img {
display: inline-block;
margin-right: 6px;
float: left;
}
.dropdownbox01 img {
display: inline-block;
margin-right: 6px;
float: left;
}
.dropdownbox02 li {
width: 250px;
height: 34px;
line-height: 32px;
background: #fff;
color: #707070;
cursor: pointer;
margin:10px auto !important;
}
.dropdownbox02 li .img02 {
display: none;
}
/*.dropdownbox02 li:hover {
background: #48a0ff;
color: #fff;
}*/
</style>
</head>
<body>
<script src="jquery-3.1.0.min.js"></script>
<script>
$(function() {
//下拉列表
$(".dropdownbox02 li").mouseenter(function() {
$(this).children(".img01").hide();
$(this).children(".img02").show();
}).mouseleave(function() {
$(this).children(".img01").show();
$(this).children(".img02").hide();
});
$(".dropdown .dropdownbox01").click(function() {
$(".dropdown .dropdownbox02").hide();
$(this).siblings(".dropdownbox02").show();
$(this).parent(".dropdown").siblings(".dropdown").children(".dropdownbox02").hide();
});
//点击处下拉框以外地区隐藏下拉框
function stopPropagation(e) {
if (e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;
}
$(document).bind(‘click‘, function() {
$(".dropdown .dropdownbox02").hide();
});
$(".dropdown").bind(‘click‘, function(e) {
stopPropagation(e);
});
//点击列表子项事件
$(".dropdown .dropdownbox02 li").click(function() {
$(this).parents(".dropdownbox02").hide();
$(this).parents(".dropdownbox02").siblings(".dropdownbox01").children("span").html($(this).children("span").html());
var imgsrc = $(this).children(".img01").attr("src");
$(this).parents(".dropdownbox02").siblings(".dropdownbox01").children("img").attr("src", imgsrc);
});
})
</script>
<form action="#" method="get">
<div id="dropDownList2" class="dropdown">
<div class="dropdownbox01">
<span><img src="bank_logo/PSBC.gif" />中国邮政银行</span>
</div>
<div class="dropdownbox02">
<ul>
<li>
<span><img data-tag="PSBC" src="bank_logo/PSBC.gif" />邮政银行</span>
</li>
<li ><span><img data-tag="ABC" src="bank_logo/ABC.gif" />农业银行</span></li>
<li>
<span><img data-tag="BOC" src="bank_logo/BOC.gif" />中国银行</span>
</li>
<li>
<span><img data-tag="CCB" src="bank_logo/CCB.gif" />建设银行</span>
</li>
<li>
<span><img data-tag="ICBC" src="bank_logo/ICBC.gif" />工商银行</span>
</li>
<li>
<span><img data-tag="CMB" src="bank_logo/CMB.gif" />招商银行</span>
</li>
<li>
<span><img data-tag="CITIC" src="bank_logo/CITIC.gif" />中信银行</span>
</li>
<li>
<span><img data-tag="CMBC" src="bank_logo/CMBC.gif" />民生银行</span>
</li>
<li>
<span><img data-tag="GDB" src="bank_logo/GDB.gif" />广发银行</span>
</li>
<l>
<span><img data-tag="CIB" src="bank_logo/CIB.gif" />兴业银行</span>
</li>
<li>
<span><img data-tag="CEB" src="bank_logo/CEB.gif" />光大银行</span>
</li>
<li>
<span><img data-tag="GDB" src="bank_logo/GDB.gif" />广发银行</span>
</li>
<li>
<span><img data-tag="SPDB" src="bank_logo/SPDB.gif" />浦发银行</span>
</li>
<li>
<span><img data-tag="SZPAB" src="bank_logo/SZPAB.gif" />平安银行</span>
</li>
</ul>
</div>
</div>
</form>
</div>
</body>
</html>
以上是关于select下拉带图片-模拟下拉的主要内容，如果未能解决你的问题，请参考以下文章
如何把html的select控件的下拉箭头改成图片，要是能把背景也用图片代替旧更好了
如何重写angularJs的下拉框，做到带查找筛选功能的select下拉框