jquery.select.js美化下拉选择表单

最新推荐文章于 2023-11-30 01:03:21 发布

RightHereWaitingFY

最新推荐文章于 2023-11-30 01:03:21 发布

阅读量382

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/luyundesign/article/details/119573597

版权

jQuery 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

jquery.select.js文件内容：

;(function($){
    //默认参数
    var defaluts = {
        select: "select",
        select_text: "select_text",
        select_ul: "select_ul"
    };

    $.fn.extend({
        "select": function(options){
            var opts = $.extend({}, defaluts, options);
            return this.each(function(){
                var $this = $(this);
                //模拟下拉列表
                if ($this.data("value") !== undefined && $this.data("value") !== '') {
                    $this.val($this.data("value"));
                }
                var _html = [];
                _html.push("<div class=\"" + $this.attr('class') + "\">");
                _html.push("<div class=\""+ opts.select_text +"\">" + $this.find(":selected").text() + "</div>");
                _html.push("<ul class=\""+ opts.select_ul +"\">");
                $this.children("option").each(function (i) {
                    var option = $(this);
                    console.log(i);
                    if($this.data("value") == option.val()){
                        _html.push("<li class=\"cur\" data-value=\"" + option.val() + "\">5555" + option.text() + "</li>");
                    }else{
                        _html.push("<li data-value=\"" + option.val() + "\">" + option.text() + "</li>");
                    }
                });
                _html.push("</ul>");
                _html.push("</div>");
                var select = $(_html.join(""));
                var select_text = select.find("." + opts.select_text);
                var select_ul = select.find("." + opts.select_ul);
                $this.after(select);
                $this.hide();
                //下拉列表操作
                select.click(function (event) {
                    $(this).find("." + opts.select_ul).slideToggle().end().siblings("div." + opts.select).find("." + opts.select_ul).slideUp();
                    event.stopPropagation();
                });
                $("body").click(function () {
                    select_ul.slideUp();
                });
                select_ul.on("click", "li", function () {
                    var li = $(this);
                    var val = li.addClass("cur").siblings("li").removeClass("cur").end().data("value").toString();
                    if (val !== $this.val()) {
                        select_text.text(li.text());
                        $this.val(val);
                        $this.attr("data-value",val);
                    }
                });
                
            });
        }
    });
})(jQuery);

html


<html>
  <head>
      <meta charset="utf-8" />
      <style type="text/css">
          div,ul,li{margin:0;padding:0;}
          ul{list-style:none;}
          .select{position:relative;width:134px;min-width:134px;height:36px;border:1px solid #eee;cursor:pointer;}
          .select:after{content:"";position:absolute;top:50%;right:10px;margin-top:-2px;border-top:5px solid #666;border-right:5px solid transparent;border-left:5px solid transparent;}
          .select .select_text{padding:0 20px 0 10px;height:36px;line-height:36px;}
          .select_ul{display:none;position:absolute;top:34px;left:-1px;width:134px;min-width:134px;border:1px solid #D4D4D4;border-bottom-right-radius:3px;border-bottom-left-radius:3px;background:#fff;}
          .select_ul li{line-height:36px;text-indent:10px;}
          .select_ul li:hover{color:#fff;background:#6AA7EA;}
          .select_ul li.cur{color:#fff;background:#195DA3;}
      </style>
  </head>
  <body>
      <select class="select" name="state" data-value="0">
          <option value ="0">请选择</option>
          <option value ="1" >广州市</option>
          <option value ="2" >深圳市</option>
          <option value ="3" >湛江市</option>
          <option value ="4" >北京市</option>
      </select>
      <script type="text/javascript" src="https://www.jq22.com/demo/jquerySelect20160911/js/jquery-1.7.2.js"></script>
      <script type="text/javascript" src="jquery.select.js"></script>
      <script type="text/javascript">
          $(function(){
              $('select.select').select();
              // 添加个性化图标
              var img = [
                  'arr.jpg',
                  'arr.jpg',
                  'arr.jpg',
                  'arr.jpg',
                  'arr.jpg',
              ]
              var imgHover = [
                  'arr_.jpg',
                  'arr_.jpg',
                  'arr_.jpg',
                  'arr_.jpg',
                  'arr_.jpg',
              ]
              $('.select_ul li').each(function(i,ele){
                $(ele).prepend('<img src="'+img[i]+'">')
                $(ele).hover(function(){
                  $(this).find('img').attr('src',imgHover[i])
                },function(){
                  $(this).find('img').attr('src',img[i])
                })
              })
          });
      </script>
  </body>
</html>

RightHereWaitingFY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.select.js美化下拉选择表单

jquery.select.js文件内容：;(function($){ //默认参数 var defaluts = { select: "select", select_text: "select_text", select_ul: "select_ul" }; $.fn.extend({ "select": function(options){ var opts = $.extend
复制链接

扫一扫