jquery select
html的select标签样式改不了 所有使用系统的标签会影响网站的整体效果 元旦无事自己写了一个插件 可以直接替换项目里的select标签 改成自己标签 先发出来吧 算是1.0版本的 以后有时间再继续改进～
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>index</title>
<style>
ul,li{ list-style: none; padding: 0; margin: 0;cursor:pointer}
.selectPanel{ width:150px;}
.select{width:150px;height:20px;border:solid 1px;cursor:pointer;}
.options{height:100px;overflow-y:scroll; width:150px; border:solid 1px;position:absolute;display:none;background:#fff;}
.selectBtn{width:25px;height:20px;background: #ccc; float:right;}
.selectText{width:100px;height:20px;float:left;}
</style>
<script src="jquery-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$.fn.extend({
createSelect : function(e){
var eve = window.event || e;
var objs = $(this);
var objsLen = objs.size();
objs.hide();
for (var j=0;j<objsLen;j++){
showSelect(objs.eq(j));
}
function showSelect(obj){
arr = [];
arr.push('<div class="selectPanel" style="margin-bottom:150px;">');
arr.push('<div class="select"><div class="selectText">'+ obj.find("option:selected").text() +'</div><div class="selectBtn"></div></div>');
arr.push('<div class="options" >');
arr.push('<ul></ul>');
arr.push('</div>');
arr.push('</div>');
var thisObj = $(arr.join(""));
obj.before(thisObj);
var selectOption = obj.find("option");
var selectLength = selectOption.size()
var options = [];
for(var i=0;i<selectLength;i++){
options.push("<li value=\""+selectOption.eq(i).val()+"\">"+ selectOption.eq(i).text() +"</li>")
}
$(thisObj).find(".options ul").html(options.join(""));
$(thisObj).find(".select").click(function(e){
if($(this).attr("isSelect") != "true"){
$(thisObj).find(".options").show();
$(this).attr("isSelect","true");
$.fn.stopPropagation(e)
}else{
$(thisObj).find(".options").hide();
$(this).removeAttr("isSelect");
$.fn.stopPropagation(e)
}
});
$(thisObj).find(".options ul li").hover(function(){
$(this).css({"background":"#ccc"});
},function(){
$(this).css({"background":"#fff"});
});
$(thisObj).find(".options ul li").click(function(e){
$(thisObj).find(".selectText").text($(this).text());
obj.attr("value",$(this).attr("value"))
$(thisObj).find(".options").hide();
$(thisObj).find(".select").removeAttr("isSelect");
$.fn.stopPropagation(e);
})
}
},
stopPropagation : function(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
});
$(function(){
$(".selectList").createSelect();
$(document).click(function(){
$(".options").hide();
$(".select").removeAttr("isSelect");
})
});
</script>
</head>
<body>
<select class="selectList">
<option value="0">我是......1</option>
<option value="1">我是......2</option>
<option value="2">我是......3</option>
<option value="3">我是......4</option>
<option value="4">我是......5</option>
<option value="5">我是......6</option>
<option value="6">我是......7</option>
<option value="6">我是......7</option>
<option value="6">我是......7</option>
<option value="6">我是......7</option>
<option value="6">我是......7</option>
</select>
<select class="selectList">
<option value="0">我是......1</option>
<option value="1">我是......2</option>
<option value="2">我是......3</option>
<option value="3">我是......4</option>
<option value="4">我是......5</option>
<option value="5">我是......6</option>
<option value="6">我是......7</option>
<option value="6">我是......7</option>
<option value="6">我是......7</option>
<option value="6">我是......7</option>
<option value="6">我是......7</option>
</select>
</body>
</html>
