<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery下拉框组件</title>
<style type="text/css">
body{font: 12px/1.231 "微软雅黑",Verdana,"宋体",sans-serif; }
.ui-select
{
display:inline-block;
font: 12px/1.231 "微软雅黑",Verdana,"宋体",sans-serif;
border:#bbb solid 1px;
border-radius: 3px;
background-image: -webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef));
background-image: -moz-linear-gradient(top,#ffffff,#efefef);
background-image: -webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef));
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#efefef);
cursor: pointer;
vertical-align: top;
zoom:1;
_height:25px;
}
.ui-select:hover{ box-shadow:#bbb 0px 0px 2px; }
.ui-select .default{line-height:20px; padding:2px 5px; overflow:hidden; display:block; zoom:1;}
.ui-select .default span{ float:left; }
.ui-select .default label{ font-size:10px; padding-left:3px; border-left:#bbb solid 1px; margin-left:6px; font-weight:700; float:right;}
.ui-select ul
{
margin:0;
padding:0;
list-style:none;
position:absolute;
display:block;
border:#bbb solid 1px;
margin-left:-1px;
line-height:22px;
border-bottom-right-radius: 3px 3px;
border-bottom-left-radius: 3px 3px;
text-align:left;
background:#fff;
display:none;
}
.ui-select li{ text-indent: 5px;}
.ui-select li:hover , .ui-select li.active{ background:#0bF; color:#fff;}
</style>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>
/**
* 使用说明：
* 需要引人 ui-select.css
* 使用方法一：
* html：
* <select name="sex" >
* <option value="1">man</option>
* <option value="2">woman</option>
* </select>
* js：
* $('select').select();
*
* 使用方法二：从网络中加载数据
* $('select').select({url:'1.jsp'});
*
*/
(function($){
$.fn.select = function(options){
//定义常量
var settings = $.extend({},options);
this.each(function() {
//html template
var $html = $('<span class="ui-select"><span class="default"><label>▼</label><span></span></span><ul></ul></span>');
//将下拉框隐藏，把模版插入其后
var $this = $(this).hide().after($html);
//声明全局变量
var $list = $html.find('ul'),$default = $html.find('.default'),$span = $default.find('span'),$label = $default.find('label');
//从网络加载数据
if(settings.url){
$.ajax({
url: settings.url,
dataType:'json',
async : false,
success: function(data){
//得到已经存在的option个数
var size = $this.find('option').size();
$.each(data,function(i,option){
//由于ie6 的bug ，不得不采用原生的方式对DOM进行操作
$this[0].options[i+size] = new Option(option.text,option.value);
});
}
});
}
//将option遍历到li中
$this.find('option').each(function(){
var $option = $(this);
$('<li val="'+$option.val()+'">'+$option.text()+'</li>').appendTo($list);
if($option.prop('selected') === true){
$this.val($option.val());
$span.text($option.text());
}
});
//计算下拉框宽度
if($span.text() === ''){
var $li = $list.find('li').first();
$this.val($li.attr('val'));
$span.text($li.text());
}
$span.width($list.width());
//click 事件
$default.width($span.outerWidth()+$label.outerWidth(true)).click(function(event){
//阻止事件冒泡
event.stopPropagation();
if(!$list.find('li').size())
return ;
$list.slideToggle(200);
});
$html.width($default.outerWidth());
$list.width($default.outerWidth());
$list.find('li').click(function(){
var $li = $(this);
$span.text($li.text());
if($this.val() != $li.attr('val'))
$this.val($li.attr('val')).change();
}).hover(function(){
$(this).toggleClass('active');
});
$this.change(function(){
var index = $this[0].selectedIndex,$li = $list.find('li:eq('+index+')');
$span.text($li.text());
});
$(document).click(function(){
$list.slideUp(200);
});
});
return this;
};
})(jQuery);
$(function(){
$('select[name="sex"]').select();
$('select[name="ttt"]').select({url:'/1.jsp'}).change(function(){
alert(this.value);
});
});
</script>
</head>
<body>
<form action="?">
<select name="sex" >
<option value="1">man</option>
<option value="2">woman</option>
</select>
fdsafdsafds
<input type="submit" value="send"/>
<select name="ttt" id="ttt" >
<option value="t">测试</option>
<option value="5" selected>测试2</option>
</select>
</form>
</body>
</html>
