JS自定义下拉菜单select

由于系统自定的select样式的确丑到爆,所以抽空写了这么一个可以自定义下拉菜单样式的插件,

思路就是隐藏select,用一个span标签显示内容,ul标签显示下拉列表,如图:

IE下存在一个BUG,设置overflow-y后,IE下设置width无效,只测试了IE9,其他版本未测试,当然如果能加入自定义样式的滚动条就完美了,时间关系以后再补吧

代码如下:

  1 //自定义dropdownlist的样式,
  2 //classname为模拟出来的span标签样式
  3 //ulClass为下拉列表样式,可以设置下面的li样式,增加边框背景色,颜色,等等,如.ulclass{...}  .ulclass li{....}
  4 $.fn.extend({
  5     DropDowlList: function (classname, ulClass) {
  6         for (var i = 0; i < this.length; i++) {
  7             var _this = $(this[i]);
  8             var oParent = _this.parent();
  9             var oPrev = _this.prev();
 10             var oDiv = $("<div style=‘vertical-align:middle;‘></div>");
 11             var sClass = _this.attr("class") ? _this.attr("class") : "" + " " + classname;//类名
 12             _this.attr("class", sClass);
 13             var oSpan = $("<span class=‘" + sClass + "‘ objtype=‘dropdownlistspan‘ selindex=‘" + i + "‘></span>");
 14             oSpan.css("border", _this.css("border"));
 15             oSpan.css("padding", _this.css("padding"));
 16             var position = _this.css("position");
 17
 18             if (position == "static") {
 19                 oDiv.css("position", "relative");
 20             }
 21             else {
 22                 var top = _this[0].offsetTop;
 23                 var left = _this[0].offsetLeft;
 24                 oDiv.css("position", position);
 25                 _this.addClass("cloneselect");
 26                 var oPClone = _this.parent().clone();//利用克隆父元素,计算top和left
 27                 $("body").append(oPClone);
 28                 var otClonethis = oPClone.children(".cloneselect");
 29                 oDiv.css("top", otClonethis.css("top"));
 30                 oDiv.css("left", otClonethis.css("left"));
 31                 oPClone.remove();//删除克隆
 32             }
 33             var oClone = _this.clone();
 34             $("body").append(oClone);//利用元素克隆添加到body下计算宽高
 35             oDiv.css("display", _this.css("display"));
 36             var w = oClone[0].offsetWidth + "px";
 37             var h = oClone[0].offsetHeight + "px";
 38             oDiv.css("width", w);
 39             oDiv.css("height", h);
 40             var lineHeight = parseInt(h) - parseInt(oClone.css("padding-top")) - parseInt(oClone.css("padding-bottom"));
 41             oSpan.css("line-height", lineHeight + "px");
 42             oSpan.css("width", w);
 43             oSpan.css("height", h);
 44             var oUl = $("<ul class=‘" + ulClass + "‘ objtype=‘dropdownlistul‘ style=‘list-style:none;padding-left:0px;text-indent:5px;‘></ul>");
 45
 46             oUl.css("max-height", "100px");
 47             oUl.css("overflow-y", "scroll");
 48             oUl.css("width", w);
 49             oUl.children("li").css("width", w);
 50             for (var j = 0; j < this[i].options.length; j++) {
 51                 var oLi = $("<li value=‘" + this[i].options[j].value + "‘>" + this[i].options[j].text + "</li>");
 52                 oLi[0].optiongsIndex = j;
 53                 oUl.append(oLi);
 54
 55                 oLi.click(function () {
 56
 57                     var oselect = $(this).parent("ul").siblings("select");
 58                     var ospan = $(this).parent("ul").siblings("span");
 59                     oselect[0].options.selectedIndex = this.optiongsIndex;
 60                     if (oselect[0].options.length > 0) {
 61                         var a = oselect[0].options[oselect[0].options.selectedIndex].text;
 62                         var s = "<span style=‘display: inline-block;position:absolute;right:4px;top:" + (parseInt(ospan.css("height")) / 2 - 2) + "px; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent;‘></span>";
 63                         ospan.html(a + s);
 64                     }
 65                     oselect.change();
 66                 })
 67
 68                 $(document).bind("click", function (evt) {//点击任意地方隐藏下拉此单
 69                     var evt = window.event ? window.event : evt, target = evt.srcElement || evt.target;
 70                     //阻止冒泡,怎么好像还是冒了
 71                     // 如果传入了事件对象，那么就是非ie浏览器
 72                     if (evt && evt.stopPropagation) {
 73                         //因此它支持W3C的stopPropagation()方法
 74                         evt.stopPropagation();
 75                     } else {
 76                         //否则我们使用ie的方法来取消事件冒泡
 77                         window.event.cancelBubble = true;
 78                     }
 79                     if ($(target).attr("objtype") != ‘dropdownlistspan‘) {
 80                         $("ul[objtype=‘dropdownlistul‘]").hide();
 81                     }
 82                 })
 83             }
 84             oUl.css("position", "absolute");
 85             oUl.css("top", h);
 86             oUl.css("left", 0);
 87             oClone.remove();//删除克隆
 88             oDiv.append(oUl);
 89             oDiv.append(oSpan);
 90             oDiv.append(_this);
 91             _this.hide();
 92             _this.css("position", "absolute");
 93             oSpan.css("position", "absolute");
 94             oSpan.css("top", 0);
 95             oSpan.css("left", 0);
 96             oUl.hide();
 97             if (_this[0].options.length > 0) {
 98                 var a = _this[0].options[_this[0].options.selectedIndex].text;
 99                 var s = "<span style=‘display: inline-block;position:absolute;right:4px;top:" + (parseInt(oSpan.css("height")) / 2 - 2) + "px; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent;‘></span>";
100                 oSpan.html(a + s);
101             }
102             if (oPrev.length <= 0) {
103                 oParent.prepend(oDiv);
104             }
105             else {
106                 oDiv.insertAfter(oPrev);
107             }
108
109             oSpan.click(function () {
110                 $(this).siblings("ul").show();
111             })
112         }
113
114     }
115 })