<!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>
自定义select下拉框
最新推荐文章于 2024-08-12 15:55:57 发布