$(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; } /* 下拉框样式结束 */
完整压缩包下载地址:http://pan.baidu.com/s/1bomzDYR