select下拉带图片-模拟下拉

最新推荐文章于 2023-11-29 18:04:55 发布

weixin_30925411

最新推荐文章于 2023-11-29 18:04:55 发布

阅读量327

点赞数

原文链接：http://www.cnblogs.com/kymming/p/6405594.html

版权

<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>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head> 
	<body> 				
		<form action="#" method="get"> 
			<div id="dropDownList2" class="dropdown"> 
				<div class="dropdownbox01"> 
					<span><img src="bank_logo/PSBC.gif" alt="" />中国邮政银行</span> 
				</div> 
				<div class="dropdownbox02"> 
					<ul> 
						<li> 
							<span><img data-tag="PSBC" src="bank_logo/PSBC.gif" alt="" />邮政银行</span> 
						</li> 
						<li >
							<span><img data-tag="ABC" src="bank_logo/ABC.gif" alt="" />农业银行</span>
						</li> 
						<li> 
							<span><img data-tag="BOC" src="bank_logo/BOC.gif" alt="" />中国银行</span> 
						</li> 
						<li> 
							<span><img data-tag="CCB" src="bank_logo/CCB.gif" alt="" />建设银行</span> 
						</li> 
						<li> 
							<span><img data-tag="ICBC" src="bank_logo/ICBC.gif" alt="" />工商银行</span> 
						</li> 
						<li> 
							<span><img data-tag="CMB" src="bank_logo/CMB.gif" alt="" />招商银行</span> 
						</li> 
						<li> 
							<span><img data-tag="CITIC" src="bank_logo/CITIC.gif" alt="" />中信银行</span> 
						</li> 
						<li> 
							<span><img data-tag="CMBC" src="bank_logo/CMBC.gif" alt="" />民生银行</span> 
						</li> 
						<li> 
							<span><img data-tag="GDB" src="bank_logo/GDB.gif" alt="" />广发银行</span> 
						</li> 
						<li> 
							<span><img data-tag="CIB" src="bank_logo/CIB.gif" alt="" />兴业银行</span> 
						</li> 
						<li> 
							<span><img data-tag="CEB" src="bank_logo/CEB.gif" alt="" />光大银行</span> 
						</li> 
						<li> <span><img data-tag="GDB" src="bank_logo/GDB.gif" alt="" />广发银行</span> 
						</li> 
						<li> 
							<span><img data-tag="SPDB" src="bank_logo/SPDB.gif" alt="" />浦发银行</span> 
						</li> 
						<li> 
							<span><img data-tag="SZPAB" src="bank_logo/SZPAB.gif" alt="" />平安银行</span> 
						</li> 
					</ul> 
				</div> 
			</div> 
		</form>  
	</body> 
</html>

<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>

转载于:https://www.cnblogs.com/kymming/p/6405594.html

weixin_30925411

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
select下拉带图片-模拟下拉

<style> /*下拉列表*/ ul,dl,ol,li {list-style: none;} .dropdown { float: right; position: relative; font-size: 12px; margin-right:16px; } .dropdownbox01 { width:...
复制链接

扫一扫