自定义select下拉框

最新推荐文章于 2024-05-10 17:39:47 发布

火舞云霄

最新推荐文章于 2024-05-10 17:39:47 发布

阅读量888

点赞数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义下拉列表框</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="Jselect.js" type="text/javascript"></script>
<style>
ul{
	margin:0px;
	padding:0px;
}
li {
	list-style: none outside none;
}
.select_hch {
	height: 35px;
	width: 210px;
	text-align: left;
	border: #E6E6E6 1px solid;
	float:left;
	padding-left:5px;
	padding-right:5px;
	position:relative;
	background-color: #fff;
}
.select_hch .first {
	background: url(xialakuang.png) right 10px center no-repeat #fff;
	margin-bottom: 0px;
	line-height:35px;
	height:35px;
	display:block;
	color:#B0B0B0;
	font-size:14px;
	font-family: "Microsoft YaHei";
}
.select_hch li {
	width: 100%;
	height: 20px;
	line-height: 25px;
	cursor: pointer;
	color:#B0B0B0;
	font-size:14px;
	font-family: "Microsoft YaHei";
	padding-left:5px;
	padding-right:5px;
	
}
.select_hch ul  {
	display:none;
	width: 220px;
	position:absolute;
	z-index:3000;
	top:35px;
	left:-1px;
	background-color:#FFF;
	border: #8AAF24 1px solid;
	overflow:hidden;
}
.select_hch ul li {
	display: none;
	width: 100%;
}
</style>
</head>

<body>
<div id="select" class="select_hch">
	<span class="first">单程</span>
	<input type="hidden"  value=""/>
	<ul>
		<li>单程1</li>
		<li>往返</li>
		<li>联程</li>
	</ul>
</div>



<script type="text/javascript">
$(function(){
	//自定义下拉列表框 select
	$("#select").HchSelect();
	
})
</script>

<script>
//select jquery扩展
$.fn.extend({
	HchSelect:function(){
		var me=$(this);
		var ul=me.find("ul");
		var li=me.find("li");
		var span=me.find("span");
		var hidden=me.find("input[type=hidden]");
		
		$("body").bind("click",function(){
			yinchang();
			
   
   		});
		
		function yinchang(){
			li.hide(); 
			me.css({borderColor:"#C9C9C9"});
			ul.hide();
		}
		
		//点击
		me.click(function(e){
			console.info(li.css("display") ==='none');
			if(li.css("display") !== 'none'){
				yinchang();
			}else{
				li.show(); 
				ul.show();
				me.css({borderColor:"#8AAF24"});
			};
			e.stopPropagation();
		});
		li.hover(function(){
			$(this).css({background:"#ccc",color:"#000"});
			},function(){
				$(this).css({backgroundColor:"",color:""});
				})
		li.click(function(){
			me.find("span").html($(this).text());
			hidden.val($(this).text());
			li.show();
			ul.show();
			})
		}
	});
</script>
</body>
</html>

火舞云霄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义select下拉框

自定义下拉列表框ul{ margin:0px; padding:0px;}li { list-style: none outside none;}.select_hch { height: 35px; width: 210px; text-align: left; border: #E6E6E6 1px solid; float:left; padding-lef
复制链接

扫一扫