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

随机推荐

MySQL的LOOP, LEAVE 和ITERATE语句(类似Continue、Break的写法)
和REPEAT和while语句不同,LOOP.LEAVE.ITERATE更像其他编程语言中的goto语句. LOOP要设定一个label指定循环的开始位置,而LEAVE则像其他语言中的Break会离开 ...
CMDB资产管理系统的数据表设计
Server表: asset = models.OneToOneField('Asset') 主机名(hostname) sn号(sn) 制造商(manufacture) 系统(os_platform ...
BroadcastReceiver详解(一)
今天我们来讲一下Android中BroadcastReceiver的相关知识. BroadcastReceiver也就是“广播接收者”的意思,顾名思义,它就是用来接收来自系统和应用中的广播. 在And ...
[转]使用Fabric自动化你的任务
fabric是什么? Fabric是一个Python库,可以通过SSH在多个host上批量执行任务.你可以编写任务脚本,然后通过Fabric在本地就可以使用SSH在大量远程服务器上自动运行.这些功能非 ...
CentOS 6.x安装多GCC版本号，cmake的安装与使用
操作系统:CentOS release 6.5 (Final) 当前gcc版本号:build=x86_64-redhat-linux Thread ...
google 集群计算的3大基础设施
1. GFS 分布式文件系统 2. map-reduce 分布式计算框架 3. bigtable 海量key-value的存储 (开源实现:Hypertable)
《Getting Started with WebRTC》第二章 WebRTC技术介绍
<Getting Started with WebRTC>第二章 WebRTC技术介绍本章作WebRTC的技术介绍,主要讲下面的概念: . 怎样建立P2P的通信 . 有效的信 ...
Java 实现原型(Prototype)模式
public class BaseSpoon implements Cloneable {//spoon 匙, 调羹 String name; public String getName() { re ...
HBuilder开发App教程06-首页
实战前面几节基本是一些概念的普及, 正如前面提到的,本教程会以滴石作为范例进行解说, 有兴趣的能够先行下载体验一下.或者下载源代码研究下. 新建项目打开HBuilder,在项目管理器中右键--新建 ...
WebService Get/Post/Soap 方式请求
import java.io.ByteArrayOutputStream; import java.io.FileInputStream; import java.io.InputStream; im ...

select下拉带图片-模拟下拉

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

随机推荐

热门专题