下拉框重写

$(function () {
$(".select-default").selectOpen();
});
$.fn.selectOpen = function () {
var singleSelect = function (parentObj) {
parentObj.addClass("single-select"); //添加样式
parentObj.children().hide(); //隐藏内容
var sltWidth = parentObj.attr("width"); //定义宽度
var sltHeight = parentObj.attr("height"); //定义高度
var divObj = $('<div class="boxwrap focus"></div>').prependTo(parentObj); //前插入一个DIV
divObj.css("width", sltWidth); //写入宽度
//创建元素
var titObj = $('<a class="select-tit" href="javascript:;"><span></span><i></i></a>').appendTo(divObj);
var itemObj = $('<div class="select-items"><ul></ul></div>').appendTo(divObj);
itemObj.find("ul").css("width", sltWidth);
itemObj.find("ul").css("height", sltHeight);
var selectObj = parentObj.find("select").eq(0); //取得select对象
//遍历option选项
selectObj.find("option").each(function (i) {
var indexNum = selectObj.find("option").index(this); //当前索引
var liObj = $('<li title="' + $(this).text() + '">' + $(this).text() + '</li>').appendTo(itemObj.find("ul")); //创建LI
if ($(this).prop("selected") == true) {
liObj.addClass("selected");
titObj.find("span").text($(this).text()).attr("title", $(this).text());
}
//检查控件是否启用
if ($(this).prop("disabled") == true) {
liObj.css("cursor", "default");
return;
}
//绑定事件
liObj.click(function () {
$(this).siblings().removeClass("selected");
$(this).addClass("selected"); //添加选中样式
selectObj.find("option").prop("selected", false);
selectObj.find("option").eq(indexNum).prop("selected", true); //赋值给对应的option
titObj.find("span").text($(this).text()).attr("title", $(this).text()); //赋值选中值
itemObj.hide(); //隐藏下拉框
selectObj.trigger("change"); //触发select的onchange事件

});
});

//检查控件是否启用
if (selectObj.prop("disabled") == true) {
titObj.css("cursor", "default");
return;
}
//绑定单击事件
titObj.click(function (e) {
e.stopPropagation();
//表单验证提示信息点击之后消失
$(this).parents(".pst-rela").find(".tips-text").hide();
if (itemObj.is(":hidden")) {
selectObj.trigger("click"); //触发select的click事件

//隐藏其它的下位框菜单
$(".single-select .select-items").hide();
//位于其它无素的上面
itemObj.css("z-index", "51");
//显示下拉框
itemObj.show();
//加深边框颜色
//divObj.addClass('focus');

} else {
//位于其它无素的上面
itemObj.css("z-index", "");
selectObj.trigger("blur"); //触发select的onblure事件
//隐藏下拉框
itemObj.hide();
//去除边框颜色
//divObj.removeClass('focus');
}
});
//绑定页面点击事件
$(document).click(function (e) {
selectObj.trigger("blur"); //触发select的onblure事件
itemObj.hide(); //隐藏下拉框
//divObj.removeClass('focus');//去除边框颜色
});
};
return $(this).each(function () {
singleSelect($(this));
});
}
//下拉框重写结束

<div class="select-default">
<select >
<option value="">这样就可以啦</option>
</select>
</div>

.single-select ol, ul
{
list-style: none;
padding: 0;
margin: 0;
}
.single-select
{
position: relative;
display: inline-block;
font-family: Microsoft YaHei;
color: #666;
font-size: 14px;
text-align: left;
vertical-align: middle;
cursor: pointer;
}
.single-select .boxwrap
{
display: inline-block;
width: 161px;
border: solid 1px #d6d6d6;
vertical-align: middle;
}
.single-select .boxwrap.focus, .single-select .boxwrap.focus ul
{
border: solid 1px #ed9334;
}
.single-select .select-tit
{
position: relative;
display: block;
padding: 0 36px 0 5px;
line-height: 26px;
height: 26px;
text-decoration: none;
background: #fff;
word-break: break-all;
color: #666;
overflow: hidden;
}
.single-select .select-tit span
{
display: inline-block;
height: 26px;
}
.single-select .select-tit i
{
position: absolute;
right: 0;
top: 0;
display: inline-block;
width: 26px;
height: 26px;
background: url(../images/sprite.png) -134px -20px no-repeat;
}
.boxwrap.focus i{
background-position:-134px -20px;
}
.single-select .select-items
{
display: none;
position: absolute;
left: 0;
top: 31px;
}
.select-up .select-items
{
top:auto;
bottom:31px;
}
.single-select .select-items ul
{
position: relative;
width: 161px;
max-height: 130px;
border: 1px solid #d6d6d6;
background: #fff;
overflow-y: auto;
overflow-x: hidden;
}
.single-select .select-items ul li
{
display: block;
padding-left: 5px;
line-height: 26px;
height: 26px;
overflow: hidden;
cursor: pointer;
}
.single-select .select-items ul li:hover
{
color:#ed9334;
}
.single-select .select-items ul li.selected
{
background: #ed9334;
color:#fff;
}
.single-select.disabled .boxwrap
{
border: 1px solid #d6d6d6;
}
.single-select.disabled .select-tit
{
color:#b3b3b3;
cursor:default;
}
.single-select.disabled .select-items
{
display:none !important;
}
/* 下拉框样式结束 */