这个下拉菜单存在于body中，不会受select父级overflow的影响，同样依赖于jquery。

缺陷是如果select上的样式不是定义在class上的，不能完全获取select上的样式。

不过，皮肤的样式可以通过css来修改。

直接上代码：

html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>select 皮肤</title>

    <link rel="stylesheet" type="text/css" href="css/main.css" />

</head>

<body>

<div class="mydiv1 mydiv cl" id="mydiv1">

    <select class="select1">

        <option>1111111</option>

        <option>1111112</option>

        <option>1111113</option>

    </select>

    <select class="select2">

        <option>2111111</option>

        <option>2111112</option>

        <option>2111113</option>

    </select>

</div>

<div class="mydiv2 mydiv cl" id="mydiv2">

    <select class="select1">

        <option>1211111</option>

        <option>1211112</option>

        <option>1211113</option>

    </select>

    <select class="select2">

        <option>2211111</option>

        <option>2211112</option>

        <option>2211113</option>

    </select>

</div>

<script type="text/javascript"  src="js/entry.js"></script>

</body>

</html>

main.css:

html,body,div,p,span,i,dl,dt,dd,ul,ol,li,a,select,input,textarea{ margin:; padding:; }

body{ font: 'Mircosoft Yahei' 14px/1.5; color: #333; }

ul,ol,li{ list-style: none; }

a:link,a:visited,a:active,a:hover{ text-decoration: none; color: #333; }

input,select,textarea{ outline: none; }

.cl{ zoom:; }

.cl:after{ clear: both; display: table; content: ""; }

.mydiv select{ float: left; margin:10px; width: 300px; height: 40px; line-height: 40px; }

/*select 模拟*/

.js-select-top{ border: 1px solid #dfdfdf; display: inline-block; height: 40px; line-height: 40px; position: relative; cursor: pointer; }

.js-sel-arr{ display: inline-block; width:; height:; border:6px dashed transparent; border-top:6px solid #555; right: 10px; position: absolute; top:50%; margin-top:-6px; }

.js-select-top .js-select-tit{ display: block; height: 100%; padding: 0 30px 0 10px; }

.js-select-top .default{ color: #999; }

.js-sel-list{ position: absolute; z-index:; border: 1px solid #ddd; background: #fff; overflow-y: auto; }

.js-sel-list li{ height: 30px; line-height: 30px; }

.js-sel-list li a{ padding: 0 10px; display: block; }

.js-sel-list li.active a{ background: #eee; }

css文件中，主要的是select模拟的那段样式，可以根据自己的需求更改。

entry.js:

function selectFun(obj,i,dom){this.obj = $.extend({

        liHeight: "30px",

        ulHeight: "300px",

        liClass: "active"

    }, obj || {});

    this.dom = $(dom);

    this.index = i;

    this._width = this.dom.outerWidth();//宽度

    this.addSkin();

    $(document).click(function(e){

        var tag = $(e.target);

        $("ul.js-sel-list").not(":hidden").hide();

    });

}

selectFun.init = function(obj,fn,i,dom){

    return new selectFun(obj,fn,i,dom);

}

selectFun.prototype.addSkin = function(){//添加皮肤

  var _class = this.dom.attr("class");

  var self = this;

  //ie不能直接用css("margin")

  var marginTop = this.dom.css("marginTop");

  var marginRht = this.dom.css("marginRight");

  var marginBtm = this.dom.css("marginBottom");

  var marginLft = this.dom.css("marginLeft");

  var margin = marginTop + " " + marginRht + " " + marginBtm + " " + marginLft;

  this.topDom = $("<div class='js-select-top "+ _class +"' style='width:"+ this._width +"px; float:"+ this.dom.css("float") +"; margin:"+ margin +"' data-id='js-sel"+ this.index +"'><i class='js-sel-arr'></i></div>");//头部div

    this.titDom = $("<span class='js-select-tit'></span>");

    this.dom.hide().after(this.topDom.append(this.titDom));

    this.getVal();

    this.topDom.on("click",function(e){

        e.stopPropagation();

        var menu = $("#js-sel"+ self.index);

        if(menu.length > 0 && menu.is(":hidden")){

            menu.siblings("ul.js-sel-list").hide();

            menu.show();

        }else if(menu.length === 0){

            $("ul.js-sel-list").hide();

            self.addMenu($(this));

        }else{

            menu.hide();

        }

    });

}

selectFun.prototype.position = function(t){//获取菜单位置

    var screenh = $(window).height();

    var dt = t.offset().top;

    var df = t.offset().left;

    var dh = t.outerHeight();

    var ulh, clih, culh;

    culh = parseInt(this.obj.ulHeight);

    clih = parseInt(this.obj.liHeight);

    var opth = this.dom.find("option").length * clih;

    if(opth >= culh){

        ulh = culh;

    }else{

        ulh = opth;

    }

    if((dt + dh + ulh) >= screenh && (dt - ulh) > 0){

        return {"left":df,"top":(dt - ulh)};

    }else{

        return {"left":df,"top":(dt + dh)};

    }

}

selectFun.prototype.addMenu = function(t){//添加下拉菜单

    var pos = this.position(t);

    var listDom = $("<ul class='js-sel-list' id='js-sel"+ this.index +"' style='width:"+ this._width +"px; left:"+ pos.left +"px; top:"+ pos.top +"px; max-height:"+ this.obj.ulHeight +"'></ul>");

    var listStr = '';

    var opts = this.dom.find("option");

    var liClass = '';

    var self = this;

    for(var n=0; n<opts.length; n++){

        if(opts.eq(n).val() === self.dom.val()){

            liClass = self.obj.liClass;

        }else{

            liClass = '';

        }

        listStr += '<li data-val="'+opts.eq(n).val()+'" class="'+ liClass +'" style="height:'+ self.obj.liHeight +'; line-height:'+ self.obj.liHeight +'"><a href="javascript:;">'+ opts.eq(n).html() +'</a></li>'

    }

    listDom.html(listStr);

    $("body").append(listDom);

    this.liClick('#js-sel'+ this.index);

    this.keyEvent(listDom);

}

selectFun.prototype.getVal = function(){//头部获取值

    var val = this.dom.val();

    var txt = this.dom.find("option:selected").text();

    this.titDom.text(txt).data("val",val);

}

selectFun.prototype.setVal = function(t){//设置头部值 t:li

    var val = t.data("val");

    var txt = t.text();

    this.titDom.text(txt).data("val",val);

    this.dom.find("option").eq(t.index()).attr("selected",true);

    this.dom.trigger("change");

    t.parents("ul.js-sel-list").hide();

}

selectFun.prototype.liClick = function(tp){//点击li事件

    var self = this;

    $("body").on("click",tp+" li",function(e){

        e.stopPropagation();

        var $t = $(this);

        self._addClass($t);

        self.setVal($t);

    });

}

selectFun.prototype.keyEvent = function(menu){//键盘事件,ul的节点，当前class的名称

    var lis = menu.find("li");

    var len = lis.length;

    var self = this;

    $(document).keyup(function(e){

        if(menu.is(":hidden")){

            return;

        }

        var code = e.keyCode;

        var nowDom = menu.find("li." + self.obj.liClass);

        var nowIndex = nowDom.index();

        switch(code){

            case 38:

                nowIndex --;

                if(nowIndex < 0){

                    nowIndex = len - 1;

                }

                self._addClass(lis.eq(nowIndex));

              break;

            case 40:

                nowIndex ++;

                if(nowIndex >= len){

                    nowIndex = 0;

                }

                self._addClass(lis.eq(nowIndex));

              break;

            case 13:

              self.setVal(nowDom);

              break;

            case 27:

                menu.hide();

              break;

        }

    });

}

selectFun.prototype._addClass = function(t){//添加当前class

    t.addClass(this.obj.liClass).siblings("li").removeClass(this.obj.liClass);

}

$.fn.extend({

    selecter: function(obj){

        this.each(function(i,dom){

            selectFun.init(obj,i,dom);

        });

    }

});

$("select").selecter();

$(".select1").change(function(){

    alert($(this).val());

});

js中的selecter方法可以传递一个json格式的数据，其中liHeight指的是li的高度，ulHeight指的是下拉菜单的高度，liClass是当前li的状态class。

例如，我想改变li的高度为25px：

$("select").selecter({"liHeight":"25px"});

其中select的原有事件change可以正常使用。

依赖jquery的select皮肤2的更多相关文章

  1. jQuery首页更换背景皮肤

    昨天做了一个jQuery首页更换背景皮肤,感觉还是挺不错的,一共需要两个文件,一个是我们写的HTML文件,我们起名叫做index.html,一个是我们引入的jQuery文件,我们起名叫做jQuery. ...

  2. Jquery获取select选中的文本与值

    jquery获取select选择的文本与值获取select :获取select 选中的 text :    $("#ddlregtype").find("option:s ...

  3. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

  4. jQuery切换网页皮肤保存到Cookie实例

    效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/25.htm 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//D ...

  5. jQuery取得select选择的文本与值

    jquery获取select选择的文本与值获取select :获取select 选中的 text :$("#ddlregtype").find("option:selec ...

  6. Jquery操作select,左右移动,双击移动 取到所有option的值

    $(function () { function MoveItem(fromId, toId) { $("#" + fromId + " option:selected& ...

  7. JQuery 绑定select标签的onchange事件，弹出选择的值，并实现跳转、传参

    <script src="jquery.min.js" type="text/javascript"></script> <scr ...

  8. jquery中select的应用

    //得到select项的个数 jQuery.fn.size = function(){ return jQuery(this).get(0).options.length; } //获得选中项的索引 ...

  9. 简单jquery实现select三级联动

    简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...

随机推荐

  1. deepin与win10 设置共享文件

    在做预料训练时用的是基于linux环境下的kenlm训练工具,然后当时发现woc? 这这这这训练出来的语言模型居然拖不到win10下使用......当时特别二,就在linux下登录邮箱给自己发邮件23 ...

  2. 【计算机视觉】论文笔记：Ten years of pedestrian detection, what have we learned?

    最近正在研究行人检测,学习了一篇2014年发表在ECCV上的一篇综述性的文章,是对行人检测过去十年的一个回顾,从dataset,main approaches的角度分析了近10年的40多篇论文提出的方 ...

  3. [转帖]看完这篇文章，我奶奶都懂了https的原理

    看完这篇文章,我奶奶都懂了https的原理 http://www.17coding.info/article/22 非对称算法 以及 CA证书 公钥 核心是 大的质数不一分解 还有 就是 椭圆曲线算法 ...

  4. [转帖]rpm包和deb分别是什么？

    https://www.cnblogs.com/hanfanfan/p/9133789.html 需要不停的学习才可以. 一.RMP 是 LINUX 下的一种软件的可执行程序,你只要安装它就可以了.这 ...

  5. 自己总结的keepalived的配置流程以及注意事项

    编写背景:上班时领导要求我们团队实现postgresql主备切换的高可用问题,我辅助keepalived的部分,从查资料到实施最后使用,最后编写了这个博客,水平有限,欢迎大家指正 ###postgre ...

  6. 小菜鸟之JAVA面试题库1

    四次挥手 客户端发送释放连接报文,关闭客户端到服务端的数据传输 服务端收到后,发送确认报文给客户端 服务端发送释放连接报文,关闭服务端到客户端的数据传输 客户端发送一个确认报文给服务端 ------- ...

  7. 小记---------sparkRDD的Transformation 和 Action 及案例 原理解释

    RDD :弹性分布式数据集:是一个容错的.并行的数据结构,可以让用户显式地将数据存储到磁盘或内存中,并控制数据的分区   RDD是Spark的核心数据结构,通过RDD的依赖关系形成Spark的调度顺序 ...

  8. javase-整数变量的交换

    public class Operator { public static void main(String[] args) { int a=10; int b=20; System.out.prin ...

  9. centos终端显示字母重叠

    在使用VMware虚拟机安装linux之后,之后调整了中文显示,但是后来不知道怎么回事在终端显示的字母很多都是重叠的. 在百度上也找到很多的解决办法 eg: 终端键入:vi /etc/fonts/co ...

  10. JWT了解和实际使用

    一.JWT JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案.虫虫今天给大家介绍JWT的原理和用法. 1.跨域身份验证 Internet服务无法与用户身份验证分开.一般过程如下 ...