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

随机推荐

BB FlashBack pro导出AVI格式的配置参数
文件-->导出,选择AVI格式在选择AVI解码器中选择Cinepak Codec by Radius压缩质量:建议6~12%点击确定在AVI导出选项中选择帧速率:4帧每秒音频选择格式 11.02 ...
Codevs1062路由选择
/* #include<iostream> #include<cstdio> #include<cstring> #define MAXN 301 using na ...
Chrome 浏览器安装Vue插件方法 (十分详细)
博主最近在研究Vue,无奈新手想安装Chrome的Vue插件,整理下安装流程: 1.首先去github下载vue.zip文件插件(还有npm安装方法这里就不介绍了自行百度)下载地址:https://g ...
使用SmartQQ实现的智能回复（Web QQ协议）
采用SmartQQ SDK进行开发,官网:https://github.com/ScienJus/smartqq 此项目只是集成使用的方法,在com.jsoft.robot.SmartQQUse.Re ...
JavaScript 函数作用域的“提升”现象
在JavaScript当中,定义变量通过var操作符+变量名.但是不加 var 操作符,直接赋值也是可以的.例如 : message = "hello JavaScript ! " ...
send to instance already dealloc nil error
这个是因为发送消息的对象已经被dealloc了,然后再次发送[release]请求就不行了.所以可以retain或者alloc对象 if (self.buttonsList) { ...
PythonCookbook读书笔记
第一章数据结构和算法 1.1 将序列分解为单独的变量适用于元组.列表.字符串等.只要是可迭代的对象,都可以执行分解操作.唯一的要求是变量的总数和结构要与序列相同. 1.2 从任意长度的可迭代对象中 ...
chromium爱好者不可错过的一个开源分支
这次我要推荐下http://bloomberg.github.com/chromium.bb, 名字就叫chromium.bb,特点是专门的windows ports,关键是极大的简化了原版chrom ...
cms完整视频教程+源码孔浩老师全131讲
话不多说,请看如下链接, 项目在此文件夹目录下: JAVA专区>3.深入Java Web>3.1.cms项目很多反馈说无效本次 2016.09.12 发布最新链接链接:https ...
ARM汇编指令MCR/MRC学习
MCR指令将ARM处理器的寄存器中的数据传送到协处理器的寄存器中.假设协处理器不能成功地运行该操作.将产生没有定义的指令异常中断. 指令的语法格式: MCR{<cond>} p15, 0, ...

select下拉带图片-模拟下拉

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

随机推荐

热门专题