IE7 下，不能够自定义<select>/<option>的样式，所以为了方便起见，用div可以进行模拟

<!doctype html>

<html>

<meta charset="utf-8">

<title>div模拟select</title>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<style type="text/css">

body,html,ul,li{padding:0;margin:0;list-style:none;}

.search_btn{margin:30px auto 0;display:block;width:97px; height:38px; line-height:38px; background:#CD0000; border-left:1px solid #CD0000; text-align:center; font-size:14px; color:#fff; cursor:pointer;position:relative;z-index：1}

.search_value{overflow:hidden;}

.search_value span{float:left;margin-left:12px;}

.search_value i{width:10px;height:6px;background:url(images/search_arrow.png) no-repeat;float:right;margin:17px 12px 0 0 }

.search_option{width:97px;line-height:30px;text-align:center;color:#000;background:#FCF3F3;display:none;position:absolute;z-index:3;top:38px;left:0;}

.search_option a{color:#000;display:block;text-decoration:none;}

.search_option a:hover{color:#CD0000;text-decoration:none;}

</style>

<body>

 <div class="search_btn">

	<div class="search_value"><span>个股体检</span><i></i></div><!--或者将图片作为search_value的背景图-->

	<div class="search_option">

	  <a class="search_o" href="javascript:void(0)">个股体检</a>

	  <a class="search_o" href="javascript:void(0)">查行情</a>

	</div>

</div>

<div class="search_btn">

	<div class="search_value"><span>个股体检</span><i></i></div><!--或者将图片作为search_value的背景图-->

	<div class="search_option">

	  <a class="search_o"  href="javascript:void(0)">个股体检</a>

	  <a class="search_o"  href="javascript:void(0)">查行情</a>

	</div>

</div>

<script type="text/javascript">

$(".search_value").click(function (evt) {

	evt.stopPropagation(); //阻止冒泡

   　　 $(this).next().show();

	$(this).parent().css("z-index","2").siblings().css("z-index","1"); //当前选中的层级最高，防止IE7 下 遇到position:relative 被遮挡

	$(this).parent().siblings().find(".search_option").hide();   //隐藏其他的下拉框选项

});

$(".search_option a").click(function(){

	$(this).parent().prev().find("span").html($(this).html());   //选中内容填充

	$(this).parents("search_btn").css("z-index","1");

	$(this).parent().hide();

});

$("body").click(function(){  //点击页面其他部分，下拉框消失

	$(".search_option").hide();

	$(".search_btn").css("z-index","1");

});

</script>

</body>

</html>

　　

注意事项：
1、如果有多个并列，互相之间会相互影响，IE7下，会被遮挡，为避免此问题，所有 设置层级为：1，选中时，层级改为2
2、<a>标签，缺少herf属性的话，IE7下将无hover效果
3、使用event.stopPropagation();阻止冒泡，event.preventDefault();阻止默认事件

div 模拟<select>事件的更多相关文章

  1. div模拟select/option解决兼容性问题及增加可拓展性

    个人博客: http://mcchen.club 想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式,比如line-height等,还会由此 ...

  2. 轻松使用div模拟select下拉菜单

    没有办法,平时不是万不得已我是不喜欢去模拟各类控件的,一个是麻烦,二个是对性能也有些影响,还是原生的来的实在.老板昨天发话,必须模拟赶紧的,老外最喜欢简洁干净的风格,说的貌似都很在理的样子,业务部也是 ...

  3. [原创]HTML 用div模拟select下拉框

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML xmlns=" ...

  4. jquery实现模拟select下拉框效果

    <IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...

  5. layui问题之模拟select点击事件

    一.问题 不操作页面,实现模拟select的事件,即,自动出现下拉框,自动点击下拉框的值,select文本框的值随之改变 二.经过 刚开始查看layui官方文档,发现仅仅只是有select监听事件,即 ...

  6. 用div，ul，input模拟select下拉框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. jq插件又来了，模拟select下拉框，支持上下方向键哦

    好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (func ...

  8. jquery用div模拟一个下拉列表框

    原文 jquery用div模拟一个下拉列表框 今天分享一个用我自己用jquery写的,用div模拟下拉列表select,这个效果网上有很多,但是写一个有自己思路的代码效果,更有成就感,先看截图: 自我 ...

  9. 模拟select控件&&显示单击的坐标&&用户按下键盘，显示keyCode

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. WINDOWS系统下MYSQL安装过程中的注意事项

    1.首先MySQL的安装方式有两种:一种是MSI安装方式,很简单就像安装Windows软件一样.另外一种就是ZIP安装方式.这种相对而言比较麻烦.新手推荐MSI安装方式. 安装方式有以下两种: MSI ...

  2. T-SQL学习记录

    T-sql是对SQL(structure query language )的升级.可以加函数. 系统数据库:master管理数据库.model模版数据库,msdb备份等操作需要用到的数据库,tempd ...

  3. Linux硬件IO的优化简介

    Linux硬件IO的优化简介 首先简单介绍下有哪些硬件设备如下(由于硬件种类厂家等各种因素我就不在此多做介绍有兴趣的可以自行学习): 1.CPU:中央处理器,是计算机运算控制的核心部件之一,相当于人的 ...

  4. jetBrain系列软件

    请尽量支持正版软件!https://www.jetbrains.com/ 本文仅供参考 以下提供一种方法可以无限期体验JetBrain2016系列软件. 1.下载JetbrainsCrack-2.5. ...

  5. DoraCMS 源码知识点备注

    项目需要研究了下DoraCMS这款开源CMS,真心做的不错:).用的框架是常用的express 4 + mongoose,代码也很规范,值得学习. 源码中一些涉及到的小知识点备注下: https:// ...

  6. UML类图（上）：类、继承和实现

    面向对象设计 对于一个程序员来说,在工作的开始阶段通常都是别人把东西设计好,你来做.伴随着个人的成长,这个过程将慢慢变成自己设计一部分功能来实现,自己实现.如果要自己设计,无论是给自己看,还是给别人看 ...

  7. HBase笔记：对HBase原理的简单理解

    早些时候学习hadoop的技术,我一直对里面两项技术倍感困惑,一个是zookeeper,一个就是Hbase了.现在有机会专职做大数据相关的项目,终于看到了HBase实战的项目,也因此有机会搞懂Hbas ...

  8. python装饰器

    今天看了装饰器的一些内容,感觉@修饰符还是挺抽象的. 装饰器就是在不用改变函数实现的情况下,附加的实现一些功能,比如打印日志信息等.需要主意的是装饰器本质是一个高阶函数,她可以返回一个函数. 装饰器需 ...

  9. 错误: 从内部类中访问本 地变量vvv; 需要被声明为最终类型

    从github 下载了源码, 进行编译, 出现了下面的错误 E:\downloads\ff\elasticsearch-master\elasticsearch-master>GRADLE :b ...

  10. ★Kali信息收集~★7.FPing ：ip段扫描

    参数: 使用方法: fping [选项] [目标...] -a显示是活着的目标 -A 显示目标地址 -b n 大量 ping 数据要发送,以字节为单位 (默认 56) -B f 将指数退避算法因子设置 ...