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();阻止默认事件
时间： 2024-10-21 08:35:38