这个下拉菜单存在于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. 关于torchvision.datasets.CIFAR10

    在Pytorch0.4版本的DARTS代码里,有一行代码是 trn_data = datasets.CIFAR10(root=data_path, train=True, download=False ...

  2. Metinfo5.1 /include/common.php 变量覆盖+SQL注入漏洞

  3. Linux CentOS安装搭建FTP文件服务

    本文环境:centos7,IP=192.168.1.11 1.安装vsftpd和默认配置启动 1.1 安装vsftpd yum install -y vsftpd 1.2 启动vsftpd syste ...

  4. 【VS开发】【电子电路技术】VPX技术介绍

    VPX技术介绍 杨跃江 2009-12-18 杨跃江 13902479857 中科祥云(深圳)信息产业有限公司 1VPX 技术 新型VPX(VITA 46)标准是自从VME引入后的25年来,对于VME ...

  5. 影响mysql主从延迟速度的相关参数

    1.sync-binlog MySQL提供一个sync_binlog参数来控制数据库的binlog刷到磁盘上去. 默认,sync_binlog=0,表示MySQL不控制binlog的刷新,由文件系统自 ...

  6. GS7 安装使用Oracle19c 客户端的说明

    1. 最近Oracle放出了 windows版本的oracle19c的安装文件(具体时间不详, 自己知道的时候比较晚了) 2. 发现文件其实比较多如图示: 3. 经过自己测试实现发现 不能使用  如下 ...

  7. Struts 2访问Servlet API

    在servlet中可以通过servlet API来获取Session,在Struts中如何获取Session呢? 解析:将用户名放入session 两种方案 1. 与Servlet API解耦的访问方 ...

  8. std::tr1::function和bind组件

    C++中std::tr1::function和bind 组件的使用 在C++的TR1中(Technology Report)中包含一个function模板类和bind模板函数,使用它们可以实现类似函数 ...

  9. <<C++ Primer>> 第 7 章 类

    术语表 第 7 章 类 抽象数据类型(abstract data type): 封装(隐藏)了实现细节的数据结构.    访问说明符(access specifier): 包括关键字 public 和 ...

  10. python_0基础开始_day08

    第八节 1,文件操作 文件操作目的: 持久化,永久存储 (数据库之前 -- 文件操作就是代替数据库) 读 1,找到文件位 2,双击打开 3,进行一些操作 4,关闭文件 open() 打开,通过pyth ...