首页 > 代码库 > select下拉带图片-模拟下拉
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="http://www.mamicode.com/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 = http://www.mamicode.com/$(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="http://www.mamicode.com/bank_logo/PSBC.gif" />中国邮政银行</span>
</div>
<div class="dropdownbox02">
<ul>
<li>
<span><img data-tag="PSBC" src="http://www.mamicode.com/bank_logo/PSBC.gif" />邮政银行</span>
</li>
<li ><span><img data-tag="ABC" src="http://www.mamicode.com/bank_logo/ABC.gif" />农业银行</span></li>
<li>
<span><img data-tag="BOC" src="http://www.mamicode.com/bank_logo/BOC.gif" />中国银行</span>
</li>
<li>
<span><img data-tag="CCB" src="http://www.mamicode.com/bank_logo/CCB.gif" />建设银行</span>
</li>
<li>
<span><img data-tag="ICBC" src="http://www.mamicode.com/bank_logo/ICBC.gif" />工商银行</span>
</li>
<li>
<span><img data-tag="CMB" src="http://www.mamicode.com/bank_logo/CMB.gif" />招商银行</span>
</li>
<li>
<span><img data-tag="CITIC" src="http://www.mamicode.com/bank_logo/CITIC.gif" />中信银行</span>
</li>
<li>
<span><img data-tag="CMBC" src="http://www.mamicode.com/bank_logo/CMBC.gif" />民生银行</span>
</li>
<li>
<span><img data-tag="GDB" src="http://www.mamicode.com/bank_logo/GDB.gif" />广发银行</span>
</li>
<l>
<span><img data-tag="CIB" src="http://www.mamicode.com/bank_logo/CIB.gif" />兴业银行</span>
</li>
<li>
<span><img data-tag="CEB" src="http://www.mamicode.com/bank_logo/CEB.gif" />光大银行</span>
</li>
<li>
<span><img data-tag="GDB" src="http://www.mamicode.com/bank_logo/GDB.gif" />广发银行</span>
</li>
<li>
<span><img data-tag="SPDB" src="http://www.mamicode.com/bank_logo/SPDB.gif" />浦发银行</span>
</li>
<li>
<span><img data-tag="SZPAB" src="http://www.mamicode.com/bank_logo/SZPAB.gif" />平安银行</span>
</li>
</ul>
</div>
</div>
</form>
</div>
</body>
</html>
select下拉带图片-模拟下拉
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。