这个下拉菜单存在于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. 121. 买卖股票的最佳时机（ Best Time to Buy and Sell Stock）

    题目地址:https://leetcode-cn.com/problems/best-time-to-buy-and-sell-stock/ 解题思路一:暴力求解法 根据题目我们可以知道,我们知道最大 ...

  2. JS 根据字节 截取字符串函数

    function reBytesStr(str, len) { if ((!str && typeof(str) != 'undefined')) {return '';} var n ...

  3. Python学习教程：Pandas中第二好用的函数

    从网上看到一篇好的文章是关于如何学习python数据分析的迫不及待想要分享给大家,大家也可以点链接看原博客.希望对大家的学习有帮助. 本次的Python学习教程是关于Python数据分析实战基础相关内 ...

  4. HDU1305 Immediate Decodability （字典树

    Immediate Decodability An encoding of a set of symbols is said to be immediately decodable if no cod ...

  5. H.Holy Grail ( floyd )（The Preliminary Contest for ICPC Asia Nanjing 2019）

    题意: 给出一个有向图,再给出6条原来不存在的路径,让你在这6条路径上添加一个最小的数,使图不存在负环. 思路: 直接6遍 floyd 输出就行了. #include <bits/stdc++. ...

  6. C++练习 | 基于栈的中缀算术表达式求值（double类型

    #include<iostream> #include<stack> #include<cmath> using namespace std; char ch; b ...

  7. GitHub从小白到熟悉<二>

    创建 仓库  

  8. Feign声明式服务调用

    Feign是一种声明式.模板化的HTTP客户端(仅在Application Client中使用).声明式调用是指,就像调用本地方法一样调用远程方法,无需感知操作远程http请求. Spring Clo ...

  9. Win32汇编-创建窗体代码

    1.一个最简单的窗体的创建 ;>>>>>>>>>>>>>>>>>>>>>& ...

  10. Linux shellcode sample

    Linux shellcode sample HelloWorld.nasm ;HelloWorld.asm ;Author: Kul Subedi global _start section .te ...