Jquery制作--美化下拉框

Posted 2020-06-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery制作--美化下拉框相关的知识，希望对你有一定的参考价值。

平常我们用的原生select下拉框，大部分样式没办法修改，导致在不同的浏览器里面会跟设计图的风格大相径庭。所以为了能让它美化起来，就用JQ模拟了一个下拉框，可以随意定义样式。原生的下拉框也保留在div里面隐藏着，方便后台开发人员对其进行操作。效果图如下：

技术分享

html代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>下拉框美化</title>
  <link href="css/style.css" rel="stylesheet"/>
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/simSelect.js"></script>
  <script>
    $(function(){
    //下面是调用初始化语句，class名可通用，也可以ID单独定义
    $(".select-box").simSelect();        //什么参数都不带，默认样式。建议用这个，参数都写在div上面好了，比较直观。

    $(".slt-box01").simSelect({       //所有参数如下：
      maxNum: 4,                      //最大下拉个数(超过则显示滚动条)，默认为5 
      width: 250,                     //下拉框盒子宽度，默认为200px。为避免过多的设置宽度，尽量依照项目中最常见的宽度设定css样式。
      direction: "down",              //下拉方向，默认down，另一个是up
      disabled: false                 //是否禁用，默认不禁，禁的话是true
    });

    $(".slt-box02").simSelect({       //举例：这里写参数，div上面也写参数的情况。结果是：会以div上面的为准
      maxNum: 4,                      
      width: 250,                      
      direction: "down"
    });

    $(".slt-box03").simSelect({       //禁用下拉框的话，有三种写法，任选。建议第二种：
      disabled: true,                 //一：这里的参数写disabled:true  二：给div加class="disabled"  三：给原生select加disabled="true"
      width: 250                     
    });

    $("#slt-box04").simSelect();      //ID单独定义。单个option可以禁用
  });
</script>
</head>
<body>
  <!-- wrap和table非必需,用于布局而已 --> 
  <div class="wrap">
    <table width="600">
      <tbody>
        <tr>
          <th>不带参数：</th>
          <td><div class="select-box">
            <select>
              <option>第一个选项</option>
              <option>第二个选项</option>
              <option>第三个选项</option>
              <option>第四个选项</option>
              <option>第五个选项</option>
              <option>第六个选项</option>
            </select>
          </div></td>
        </tr>
        <tr>
          <th>初始化语句写了参数：</th>
          <td><div class="slt-box01">
            <select>
              <option>第一个选项</option>
              <option>第二个选项</option>
              <option>第三个选项</option>
              <option>第四个选项</option>
              <option>第五个选项</option>
              <option>第六个选项</option>
            </select>
          </div></td>
        </tr>
        <tr>
          <th>在div上面写参数：</th>
          <td><div class="slt-box02 up" max-num="6" width="300">
            <select>
              <option>第一个选项</option>
              <option>第二个选项</option>
              <option>第三个选项</option>
              <option>第四个选项</option>
              <option>第五个选项</option>
              <option>第六个选项</option>
            </select>
          </div></td>
        </tr>
        <tr>
          <th>禁用的样式：</th>
          <td><div class="slt-box03">
            <select>
              <option>第一个选项</option>
              <option>第二个选项</option>
              <option>第三个选项</option>
              <option>第四个选项</option>
              <option>第五个选项</option>
              <option>第六个选项</option>
            </select>
          </div></td>
        </tr>
        <tr>
          <th>其中一个选项禁用：</th>
          <td><div id="slt-box04" class="up" max-num="4" width="200">
            <select>
              <option>第一个选项</option>
              <option>第二个选项超长超长超长超长长啊</option>
              <option disabled="true">第三个选项</option>
              <option>第四个选项</option>
              <option>第五个选项</option>
              <option>第六个选项</option>
            </select>
          </div></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

CSS样式如下：

@charset "utf-8";
/* 简单reset */
body, ul, li {
    margin: 0;
    padding: 0;
}
body {
    font: 14px/24px Microsoft YaHei;
    color: #333;
}
ul { list-style: none; }
a {
    color: #333;
    outline: none;
    text-decoration: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left;
}
/* 布局样式，非必须 */
.wrap {
    width: 600px;
    margin: 100px auto 0;
    padding: 20px;
    background-color: #d3f3dd;
}
.wrap table th, .wrap table td { padding: 8px 2px; }
.wrap table th {
    font-weight: normal;
    text-align: right;
}
/* 下拉框样式 必须 */
.select-style ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.select-style select { display: none; }
.select-style {
    position: relative;
    display: inline-block;
    font-family: Microsoft YaHei;
    color: #666;
    font-size: 14px;
    text-align: left;
    vertical-align: middle;
    z-index: 50;
}
.select-style.focus { z-index: 51; }
.select-style .slt-wrap {
    display: inline-block;
    width: 200px;
    border: solid 1px #d6d6d6;
    vertical-align: middle;
}
.select-style.focus .slt-wrap { border: solid 1px #53a8df; }
.select-style .slt-title {
    position: relative;
    display: block;
    padding: 0 36px 0 5px;
    line-height: 30px;
    height: 30px;
    text-decoration: none;
    background-color: #fff;
    word-break: break-all;
    color: #666;
    overflow: hidden;
}
.select-style .slt-title .slt-text {
    display: inline-block;
    height: 30px;
 *cursor: pointer;
}
.select-style .slt-title i {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../images/ico-select.png) 0 0 no-repeat;
    *cursor: pointer;
}
.select-style.focus .slt-title i { background-position: 0 -30px; }
.select-style.disabled .slt-title i { 
    background-position: 0 -60px;
    *cursor: default; 
}
.select-style .opn-box {
    display: none;
    position: absolute;
    left: 0;
    top: 31px;
    width: 100%;
}
.select-style.up .opn-box {
    top: auto;
    bottom: 31px;
}
.select-style .opn-box .opn-list {
    position: relative;
    _width: 100%;
    max-height: 130px;
    border: 1px solid #d6d6d6;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
}
.select-style.focus .opn-box .opn-list { border-color: #53a8df; }
.select-style .opn-box .opn-list li {
    display: block;
    _width: 100%;
    padding-left: 5px;
    line-height: 26px;
    height: 26px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}
.select-style .opn-box .opn-list .selected { background: #d4edfe; }
.select-style .opn-box .opn-list li:hover {
    color: #fff;
    background: #65abda;
}
.select-style .opn-box .opn-list li.disabled {
    color: #cacaca;
    background: #f0f0f0;
    cursor: default;
}
.select-style.disabled .slt-wrap { border: 1px solid #d6d6d6; }
.select-style.disabled .slt-title {
    color: #cacaca;
    background-color: #f0f0f0;
    cursor: default;
}
.select-style.disabled .slt-title .slt-text { *cursor: default; }
/* 下拉框样式 结束 */

View Code

Jquery代码如下：

/** 
 *    Name   : 美化下拉框 
 *  Author ：子纯
 *    Time   ：2016-01-12
 **/
 (function(jQuery){
     $.fn.simSelect = function (o) {
        o = $.extend({                                    //设置默认参数 
            maxNum: 5,                                    //最大显示5个
            width: 200,                                    //默认宽200px。为避免过多的设置宽度，尽量依照项目中最常见的宽度设定css样式。
            direction: "down",                            //向下拉，另一个是up    
            disabled: false                                //不可用时为true
        },o || {});
        return this.each(function(){                    //构造开始
            if($(this).children(".slt-wrap")){            //去重复    
                $(this).children(".slt-wrap").remove();
            };
            var $ts = $(this),
                $select = $ts.find("select").eq(0),
                wid = parseFloat($ts.attr("width")),
                num = parseFloat($ts.attr("max-num")),
                $sltWrap = $("<div class=‘slt-wrap‘></div>").prependTo($ts),
                $sltTit = $("<a class=‘slt-title‘ hidefocus=‘true‘ href=‘javascript:void(0);‘><span class=‘slt-text‘></span><i></i></a>").prependTo($sltWrap),
                $sltText = $(".slt-text", $sltTit),
                $opnBox = $("<div class=‘opn-box‘><ul class=‘opn-list‘></ul></div>").appendTo($sltWrap),
                $opnList = $(".opn-list", $opnBox);
            $ts.addClass("select-style");                               //增加一个class专门作为写css样式用
            $select.find("option").each(function(i){                    //循环生成li标签    
                var text = $(this).text(),
                    $li = $("<li title=‘"+text+"‘>"+text+"</li>").appendTo($opnList);
                if(this.selected){
                    $li.addClass("selected");
                    $sltText.text(text).attr("title",text);    
                };
                if(this.disabled){
                    $li.addClass("disabled");
                    return;
                };
            });
            var $li = $("li",$opnList),
                hei = $li.height();
            if(wid){                                                    //设置宽度
                $ts.css("width",wid+"px");                            //兼容IE6、7
                $sltWrap.css("width",wid-2+"px");                                
            }else{
                $ts.css("width",o.width+"px");                        //兼容IE6、7
                $sltWrap.css("width",o.width-2+"px");
            };    
            if(num){                                                    //设置高度
                $opnList.css("max-height", hei*num+"px");
            }
            else{
                $opnList.css("max-height", hei*o.maxNum+"px");
            };
            if(o.direction == "up"){                                    //设置上、下拉方向
                $ts.addClass("up");
            };
            $li.on("click",function(){                                    //li标签的点击事件，传给原生select
                var index = $opnList.find("li").index(this),
                    text = $(this).text();
                if($(this).hasClass("disabled")){
                    return false;
                };
                $(this).addClass("selected").siblings().removeClass("selected");
                $select.find("option").prop("selected",false).eq(index).prop("selected",true);
                $sltText.text(text).attr("title",text);
                $opnBox.hide();
                $ts.removeClass("focus");
            });
            $sltTit.on("click",function(e){                             //a标签的点击下拉事件
                e.stopPropagation();                                    //阻止a标签的点击冒泡        
                if($opnBox.is(":hidden")){
                    $(".select-style .opn-box").hide();                 
                    $(".select-style").removeClass("focus");
                    $opnBox.show();
                    $ts.addClass("focus");
                }
                else{
                    $opnBox.hide();
                    $ts.removeClass("focus");
                }
            });
            $select.on("change",function(){                                //原生select的点击事件，传给ul
                var index = $(this).find("option:selected").index(),
                    text = $li.eq(index).text();
                $li.eq(index).addClass("selected").siblings().removeClass("selected");
                $sltText.text(text).attr("title",text);
            });
            $(document).on("click",function(e){                            //点击其他地方收起下拉框
                if($opnBox.is(":visible")){
                    $opnBox.hide();
                    $ts.removeClass("focus");
                }    
            });
            if($select.prop("disabled") == true || o.disabled == true || $ts.hasClass("disabled")){
                $sltTit.off("click");                                    //设置禁用状态
                $select.prop("disabled",true);
                $ts.addClass("disabled");
            };
        });
    };
})(jQuery);

View Code

兼容到IE7+（IE6其实也行，只是选项多于5个下面不会出现滚动条）。jq库用1.7+的都没问题。有好的建议可以下面提出，谢谢啦~^_^

以上是关于Jquery制作--美化下拉框的主要内容，如果未能解决你的问题，请参考以下文章

JQUERY制作简洁的多级联动SELECT下拉框

JQuery插件带搜索框的下拉框美化插件

jquery.chosen.js下拉选择框美化插件项目实例

jQuery自定义漂亮的下拉框插件8种效果

html和css制作一个搜索框，要内容与搜索图标结合，该怎么做？