模拟select

原创
2013/03/04 17:42
阅读数 94
本人不擅长设计,所以不好看大家可以帮帮设计下, 在线地址
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        body { padding: 100px;}
        ul, li {
            list-style: none
        }

        .selectxh-container {
            display: inline-block;
            position: relative;
        }

        .selectxh-container:focus {
            outline: none;
        }

        .selectxh-container dt {
            border: 1px solid #ccc;
            height: 22px;
            line-height: 22px;
            font-size: 12px;
            position: relative;
        }

        .selectxh-container dt span {
            padding-left: 8px;
        }

        .selectxh-container dd {
            position: absolute;
            z-index: 1000;
            border: 1px solid #ccc;
            border-top: 0 none;
            padding: 4px;
            font-size: 14px;
            background: #fff;
        }

        .selectxh-container dd input {
            height: 20px;
            border: 1px solid #ccc;
            padding: 0 4px;
        }

        .search-cn-box {
            padding-bottom: 6px;
        }

        .op-list {
            max-height: 200px;
            overflow: auto;
        }

        .op-list li {
            height: 24px;
            line-height: 24px;
            padding: 0 4px;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .op-list li:hover, li.active {
            background: #3875d7;
            color: #fff;
        }

        .diabled-select {
            background: #f3f3f3;
        }

        .select-bar {
            position: absolute;
            right: 8px;
            top: 50%;
            margin-top: -3px;
            width: 0;
            height: 0;
            font-size: 0;
            border-width: 5px;
            border-color: #999 transparent transparent;
            border-style: solid dashed dashed;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        ;(function ($) {
            $.fn.niceSelect = function (options) {
                $.fn.niceSelect.defaults = { //暂时没有参数
                };
                var opts = $.extend({}, $.fn.niceSelect.defaults, options);
                //
                return this.each(function () {
                    //声明一坨变量供使用
                    var $this = $(this);
                    var word = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
                    var hasFilter = $this.attr("data-filter");
                    var iDisabled = $(this).prop("disabled");
                    var iW = $this.outerWidth();
                    var iW2 = $this.outerWidth() - 20;
                    var iW3 = $this.outerWidth() - 10;
                    var options = $this.find("option");
                    var str = "";
                    var seachtxt = "";
                    var ul = "";
                    var html = "";
                    var placeh = $this.attr("data-placeholder");
                    var vid = word[Math.round(Math.random() * 26)] + word[Math.round(Math.random() * 26)] + word[Math.round(Math.random() * 26)] + Math.round(Math.random() * 26);
                    var defaultS = options.first().text();
                    //遍历option生成li
                    options.each(function (i) {
                        str += '<li tabindex="-1" class="op-info" id=\'selc' + vid + '-' + i + '\'>' + $(this).text() + '</li>';
                    });
                    //组合搜索框和列表
                    ul = '<ul class="op-list">' + str + '</ul>';
                    //判断加不加过滤的input和disabled功能
                    if (hasFilter == 1) {
                        if (!placeh) {
                            placeh = "";
                        }
                        seachtxt = '<div class="search-cn-box"><input type="text" placeholder=\'' + placeh + '\' name="" class="cn-searchin" style=\'width:' + iW2 + 'px\'></div>';
                        ul = seachtxt + ul;
                    }
                    if (iDisabled) {
                        html = '<dl id=\'selc' + vid + '\' tabindex="-1" class="selectxh-container diabled-select" style=\'width:' + iW + 'px\'><dt><span class="select-val">' + defaultS + '</span><i class="select-bar"></i></dt><dd style=\'width:' + iW3 + 'px;display:none\'>' + ul + '</dd></dl>'
                    } else {
                        html = '<dl id=\'selc' + vid + '\' tabindex="-1" class="selectxh-container" style=\'width:' + iW + 'px\'><dt><span class="select-val">' + defaultS + '</span><i class="select-bar"></i></dt><dd style=\'width:' + iW3 + 'px;display:none\'>' + ul + '</dd></dl>'
                    }
                    //插入页面并且隐藏select
                    $this.after(html).hide();
                    //声明
                    var element = $("#selc" + vid);
                    var oVal = element.find(".select-val");
                    var oBar = element.find("i.select-bar");
                    var oLi = element.find(".op-list").find("li.op-info");
                    var oInput = element.find("input.cn-searchin");
                    //模拟点击select
                    element.undelegate("click", selectFn).delegate("dt", "click", selectFn);
                    //点击方法


                    function selectFn() {
                        if ($(this).closest("dl").hasClass("diabled-select")) {
                            return;
                        }
                        $(this).closest("body").find(".selectxh-container").find("dd").filter(":visible").hide();
                        $(this).next("dd").toggle();
                        //
                        if (oInput.length > 0) {
                            $(this).next("dd").find("input.cn-searchin").focus();
                            //
                            oInput.off("keyup").on("keyup", function () {
                                var vtxt = $(this).val();
                                var reg = new RegExp(vtxt, "g");
                                //
                                oLi.each(function () {
                                    var thisTxt = $(this).html();
                                    if (!reg.test(thisTxt)) {
                                        $(this).hide();
                                    } else {
                                        $(this).show();
                                    }
                                });
                                if (oLi.filter(".active:visible").length == 0) {
                                    oLi.filter(":visible").eq(0).addClass("active").siblings().removeClass("active");
                                }
                            });
                        }
                        if (oLi.filter(".active").length == 0) {
                            oLi.eq(0).addClass("active").siblings().removeClass("active");
                        }
                        //
                        $(this).closest("dl").off("keydown").on("keydown", function (e) {
                            var num = e.keyCode;
                            switch (num) {
                                case 40:
                                    e.preventDefault();
                                    if (oLi.filter(".active").next("li:visible").length > 0) {
                                        oLi.filter(".active").next().addClass("active").focus().siblings().removeClass("active");
                                    } else {
                                        var next = oLi.filter(".active").next();
                                        while (next.is(":hidden")) {
                                            next = next.next();
                                        }
                                        next.addClass("active").focus().siblings().removeClass("active");
                                    }
                                    break;
                                case 38:
                                    e.preventDefault();
                                    if (oLi.filter(".active").prev("li:visible").length > 0) {
                                        oLi.filter(".active").prev().addClass("active").focus().siblings().removeClass("active");
                                    } else {
                                        var prev = oLi.filter(".active").prev().prev();
                                        while (prev.is(":hidden")) {
                                            prev = prev.prev();
                                        }
                                        prev.addClass("active").siblings().removeClass("active");
                                    }
                                    break;
                                case 13:
                                    e.preventDefault();
                                    $(this).closest("dl").find(".select-val").text(oLi.filter(".active").html());
                                    $(this).find("dd").hide();
                                    break;
                            }
                        });
                        //点击选择
                        oLi.off("click").on("click", function () {
                            var $$this = $(this);
                            var oSv = $$this.closest("dl").find(".select-val");
                            $$this.addClass("active").siblings().removeClass("active");
                            oSv.html($$this.text());
                            $(this).closest("dd").hide();
                        });
                    };
                    //点击别处隐藏弹出
                    $(document).off("click").on("click", function (e) {
                        var hasobj = $(e.target).closest(".selectxh-container");
                        var has = hasobj.length;
                        if (has == 0) {
                            $(".selectxh-container").find("dd").filter(":visible").hide();
                        }
                    });
                });
            }
        })(jQuery);
    </script>
    <script type="text/javascript">
        $(function () {
            $(".xh-niceSelect").niceSelect();
        })
    </script>
</head>
<body>


<select name="" disabled data-placeholder="请输入..." data-filter="1" class="select-tag xh-niceSelect" style="width:180px">
    <option>库选择...</option>
    <option value="1">商品良仓区</option>
    <option value="2">1233</option>
    <option value="2">aaaa</option>
    <option value="2">ccccc</option>
    <option value="1">商品坏仓区</option>
    <option value="2">商品dddd</option>
    <option value="1">商品良仓区</option>
    <option value="2">1233</option>
    <option value="2">aaaa</option>
    <option value="2">ccccc</option>
    <option value="1">商品坏仓区</option>
    <option value="2">商品dddd</option>
    <option value="1">商品良仓区</option>
    <option value="2">1233</option>
    <option value="2">aaaa</option>
    <option value="2">ccccc</option>
    <option value="1">商品坏仓区</option>
    <option value="2">商品dddd</option>

</select>
<select name="" data-filter="1" data-placeholder="请输入..." class="select-tag xh-niceSelect" style="width:140px">
    <option>库选择...</option>
    <option value="1">商品良仓区</option>
    <option value="2">web标准</option>
    <option value="2">css机器</option>
    <option value="2">jquery</option>
    <option value="1">javascript</option>
    <option value="2">apache</option>
    <option value="2">html</option>
    <option value="2">商品坏仓区</option>
</select>
<select name="" class="select-tag xh-niceSelect" style="width:140px">
    <option>库选择...</option>
    <option value="1">商品良仓区</option>
    <option value="2">web标准</option>
    <option value="2">css机器</option>
    <option value="2">jquery</option>
    <option value="1">javascript</option>
    <option value="2">apache</option>
    <option value="2">html</option>
    <option value="2">商品坏仓区</option>

</select>


<select name="" class="select-tag xh-niceSelect" style="width:140px">
    <option>库选择...</option>
    <option value="1">商品良仓区</option>
    <option value="2">web标准</option>
    <option value="2">css机器</option>
    <option value="2">jquery</option>
    <option value="1">javascript</option>
    <option value="2">apache</option>
    <option value="2">html</option>
    <option value="2">商品坏仓区</option>
</select>
<select name="" class="select-tag xh-niceSelect" style="width:140px">
    <option>库选择...</option>
    <option value="1">商品良仓区</option>
    <option value="2">web标准</option>
    <option value="2">css机器</option>
    <option value="2">jquery</option>
    <option value="1">javascript</option>
    <option value="2">apache</option>
    <option value="2">html</option>
    <option value="2">商品坏仓区</option>
    <option value="2">aaaa</option>
    <option value="2">ccccc</option>
    <option value="1">商品坏仓区</option>
    <option value="2">商品dddd</option>
    <option value="1">商品良仓区</option>
    <option value="2">1233</option>
    <option value="2">aaaa</option>
    <option value="2">ccccc</option>
    <option value="1">商品坏仓区</option>
    <option value="2">商品dddd</option>
</select>

</body>
</html>

展开阅读全文
打赏
1
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
1
分享
返回顶部
顶部