自定义select

最新推荐文章于 2024-10-10 09:56:47 发布

chungouzhui8919

最新推荐文章于 2024-10-10 09:56:47 发布

阅读量116

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/wglookk/blog/735254

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

.skdesigner-floatselectn{border:1px solid #DADADC;position:relative;background:url(img/skong-buttonbg.jpg) repeat-x;}
.skdesigner-floatselectn:after{content:".";display:block;clear:both;visibility:hidden;height:0;}
.skdesigner-floatselectnc{height:28px;line-height:28px;padding:0 30px 0 8px;font-size:12px;color:#666666;}
.skdesigner-floatselectnb{position:absolute;right:0;top:0;height:28px;width:30px;cursor:pointer;}
.skdesigner-floatselectnb span.icon{display:block;height:12px;width:12px;margin:9px 0 0 9px;background:url(img/skong-add3.png) no-repeat 0 4px;}
.skdesigner-floatselectn .select span.icon{background-position:0 -8px;}
.skdesigner-floatselectnlist{position:absolute;top:28px;left:-1px;border:1px solid #D5D5D5;border-top:0;font-size:12px;color:#666666;display:none;z-index:2;}
.skdesigner-floatselectnlist ul li{display:block;width:100%;clear:left;line-height:28px;border-top:1px solid #D5D5D5;white-space:nowrap;background:#EDEDEF;}
.skdesigner-floatselectnlist ul li span.texta{padding:0 8px;display:block;}
.skdesigner-floatselectnlist ul li:hover{background:#F7F7F7;}

</style>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

//select列表节点选取事件
$(".skdesigner-floatselectnlist").find("li").find("span").click(function(){

var id = $(this).parents(".skdesigner-floatselectn").find(".skdesigner-floatselectnb").attr("id");

var texta =$(this).text();

$("#"+id).parents(".skdesigner-floatselectn").find(".skdesigner-floatselectnc").html(texta);
$("#"+id).parents(".skdesigner-floatselectn").find(".skdesigner-floatselectnlist").hide();
})

//划过select
$(".skdesigner-floatselectn").hover(function(){
var id = $(this).find(".skdesigner-floatselectnb").attr("id")
var topobj = $("#"+id).parents(".skdesigner-floatselectn");

   topobj.find(".skdesigner-floatselectnlist").show()
   $("#"+id).addClass("select")
},function(){
   var id = $(this).find(".skdesigner-floatselectnb").attr("id")
   var topobj = $("#"+id).parents(".skdesigner-floatselectn");
   topobj.find(".skdesigner-floatselectnlist").hide()
   $("#"+id).removeClass("select")
})
//

})

</script>
</head>

<body>