这个下拉菜单存在于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. 【VS开发】CTime和CTimeSpan使用

    此文就用一个程序表示,相信只要是学过C语言的都能看得懂的. [html] view plain copy print? // CTimeTest.cpp : Defines the entry poi ...

  2. Kafka的知识总结

    前言 转自(https://www.cnblogs.com/zhuifeng523/p/12081204.html) Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partit ...

  3. 什么是PWA

    什么是PWA:https://www.jianshu.com/p/299c9c720e56 2019前端必会黑科技之PWA:https://www.jianshu.com/p/098af61bbe04 ...

  4. python 操作mongodb 文件相关

    https://api.mongodb.com/python/current/tutorial.html# 文档地址 from pymongo import MongoClientfrom gridf ...

  5. Linux服务器Java进程突然消失排查办法

    出处:JAVA进程突然消失的原因? 问题描述 在实际生产环境下,如果我们遇见Java进程突然消失,该如何去排查问题? 思路 可能有几种原因: ①.Java应用程序的问题:发生OOM导致进程Crash ...

  6. jQuery可拖拽旋转的3D图片墙

    在线演示 本地下载

  7. uboot 主Makefile 分析。

    本文以uboot_1.1.6 对应的CPU是S3C2440 为例 uboot_1.1.6 根目录下的主Makefile开头: VERSION = PATCHLEVEL = SUBLEVEL = EXT ...

  8. JS图片轮播[左右轮播

    直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  9. 异常-throw的概述以及和throws的区别

    package cn.itcast_06; /* * throw:如果出现了异常情况,我们可以把该异常抛出,这个时候的抛出的应该是异常的对象. * * throws和throw的区别(面试题) thr ...

  10. O021、创建 Image

    参考https://www.cnblogs.com/CloudMan6/p/5393376.html   本节演示如何通过 Web GUI 和 CLI 两种方法创建image.   OpenStack ...