select下拉带图片-模拟下拉

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

select下拉带图片-模拟下拉的更多相关文章

Extjs4中用combox做下拉带图片的下拉框
今天,莫名的来个一个需求,需要做的一个下拉框中,需要有图片,这不...谷歌+度娘然后找网友,终于搞定.现在感谢这些提供资料的友友... 效果如图:
模拟select控件，css模拟下拉
<!DOCTYPE html > <head> <meta http-equiv="Content-Type" content="t ...
JS模拟下拉框select
最近做的一个项目有下拉框同事都是用的是美化控件,但是用美化控件当然是好但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...
[js开源组件开发]模拟下拉选项框select
模拟下拉选项框select 在css3流行的情况下,下拉框还是无法满足PD的需求,所以有了autosearch,有了模拟下拉框.效果如下图: select DEMO请案例点击这里查看.http://w ...
jquery模拟下拉框单选框复选Select，Checkbox，Radio
在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&qu ...
EazyUI_Datagrid_行内编辑(editor)的combobox下拉框带图片
1.业务需求: 商品的明细列表里面下拉框需要 [图片+文字 ] 显示 2.我们使用的是EazyUI,而我比较懒,不习惯用拼接html来显示列表页面,使用的是eazyui的数据网格(datagrid) ...
Android 聊天表情输入、表情翻页带效果、下拉刷新聊天记录
经过一个星期的折腾,最终做完了这个Android 聊天表情输入.表情翻页带效果.下拉刷新聊天记录.这仅仅是一个单独聊天表情的输入,以及聊天的效果实现.由于我没有写server,所以没有两方聊天的效果. ...
android 自定义scrollview 仿QQ空间效果下拉伸缩顶部图片，上拉回弹上拉滚动顶部title 颜色渐变
首先要知道自定义scrollview 仿QQ效果下拉伸缩放大顶部图片的原理是监听ontouch事件,在MotionEvent.ACTION_MOVE事件时候,使用不同倍数的系数,重置布局位置[ ...
div模拟下拉框
1.模拟下拉框.点击文本框在文本框下面显示一个层divList,点击divList以外的任何地方,关闭divList层 document.body.onclick = function (e) { e ...

随机推荐

treetable 用法小例
插件地址:http://pan.baidu.com/s/1kVf0Kcfcript src="/plugins/jQuery/jQuery-2.1.4.min.js">< ...
Spring 3.0 注解
原文 :http://www.blogjava.net/ashutc/archive/2011/04/14/348270.html 另两参考博客 : http://kingtai168.iteye. ...
max file descriptors [4096] for elasticsearch proess is too low, increase to at least [65536]
修改文件 /etc/security/limits.conf 加入以下两行: sonar hard nofile 65536 sonar soft nofile 65536 #备注:sonar这里是 ...
Unity3D 异步加载在场景加载中的使用
异步加载我们想一想玩过的一些游戏,基本都会有加载界面——因为游戏场景数据较大,所以需要加载一小段时间.那为什么一些2D游戏也会有加载界面呢?按理说2D游戏场景会很小,这样做是为了让游戏跑在低端设备上 ...
CODEVS_2800 送外卖状态压缩+动态规划
原题链接:http://codevs.cn/problem/2800/ 题目描述 Description 有一个送外卖的,他手上有n份订单,他要把n份东西,分别送达n个不同的客户的手上.n个不同的客户 ...
oracle-统计员工x
1. SELECTe.depid,avg(s.bonussalary+s.basesalary) AS avgsal from employ e,salary s where e.employId=s ...
Java并发编程-Executor框架（转）
本文转自http://blog.csdn.net/chenchaofuck1/article/details/51606224 感谢作者我们在传统多线程编程创建线程时,常常是创建一些Runnable ...
CocoaPods为project的全部target添加依赖支持
在使用CocoaPods时.pod install默认仅仅能为xcodeproject的第一个target加入依赖库支持.假设要为全部的target添加可依照例如以下步骤进行两种情 1. 编辑Pod ...
一步步走向国际乱码大赛-- 恶搞C语言
大家都一直强调规范编码.可是这个世界上有个大师们娱乐的竞赛--国际乱码大赛. 能写出来的都是对语言深入了解的master.我从没想自己也能"恶搞"C,一直都是老老实实编码.就在前几 ...
把握linux内核设计思想（十二）：内存管理之slab分配器
[版权声明:尊重原创,转载请保留出处:blog.csdn.net/shallnet,文章仅供学习交流.请勿用于商业用途] 上一节最后说到对于小内存区的请求,假设採用伙伴系统来进行分配,则会在页内产生非 ...

select下拉带图片-模拟下拉

select下拉带图片-模拟下拉的更多相关文章

随机推荐

热门专题