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

随机推荐

linux下将目录授权给其他用户的步骤
1.更改目录所有者命令:chown -R 用户名称目录名称2.更改目录权限命令:chmod -R 755 目录名称
JS实现限行
一.JS代码实现 1. 机动车辆限行如下图所示: 具体详情请访问:http://www.bjjtgl.gov.cn/zhuanti/10weihao/index.html 2.JS代码实现 <! ...
数学知识巧学JCF(Java Collections framework)
不知你是否还记得高中我们学过的集合,映射,函数,数学确实很牛逼,拿它来研究java集合类,轻而易举的就把知识理解了.本篇文章适合初学java集合类的小白,也适合补充知识漏缺的学习者,同时也是面试者可以 ...
Codevs1062路由选择
/* #include<iostream> #include<cstdio> #include<cstring> #define MAXN 301 using na ...
Ajax向前后台传递json和转换
学生管理系统MVC模式设计心得: jquery .ajax提交data数据格式 jquery 的Ajax方法提交数据,但是是多个参数,具体data的格式如下: data提交的数据类型为:Object ...
android 图片的平移,缩放和旋转
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...
Swift的可选链，类型转换和扩展
可选链(Optional Chaining) 可选链是一种请求或调用属性.方法,子脚本的过程. 可选性体现于请求或调用的目标当前可能为nil.若不为nil则成功调用.否则返回nil并将链失效. 调用可 ...
Linux内核模块编程与内核模块LICENSE -《具体解释（第3版）》预读
Linux内核模块简单介绍 Linux内核的总体结构已经很庞大,而其包括的组件或许多.我们如何把须要的部分都包括在内核中呢?一种方法是把全部须要的功能都编译到Linux内核.这会导致两个问题.一是生成 ...
Classification and logistic regression
logistic 回归 1.问题: 在上面讨论回归问题时.讨论的结果都是连续类型.但假设要求做分类呢?即讨论结果为离散型的值. 2.解答: 假设: 当中: g(z)的图形例如以下: 由此可知:当hθ( ...
PAT 1094. The Largest Generation(BFS)
CODE: #include<cstdio> #include<cstring> #include<queue> using namespace std; bool ...

select下拉带图片-模拟下拉

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

随机推荐

热门专题