va

 va

关注
发信
关注(28)粉丝(399)

jq下拉选择组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
body{
  background: #2286b6;
}


    .fs-wrap {
        position: relative;
        display: inline-block;
        width: 200px;
        font-size: 12px;
        line-height: 1;
    }

    .fs-label-wrap {
        color: #fff;
        position: relative;
        border: 1px solid #ccc;
        cursor: default;
    }

    .fs-label-wrap,
    .fs-dropdown {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .fs-label-wrap .fs-label {
        padding: 4px 22px 4px 8px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 16px;
    }

    .fs-arrow {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 4px solid #fff;
        position: absolute;
        top: 0;
        right: 5px;
        bottom: 0;
        margin: auto;
    }

    .fs-dropdown {
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        margin-top: 5px;
        width: 100%;
        z-index: 1000;
    }

    .fs-dropdown .fs-options {
        max-height: 200px;
        overflow: auto;
    }

    .fs-search input {
        width: 100%;
        padding: 2px 4px;
        border: 0;
    }

    .fs-option,
    .fs-search,
    .fs-optgroup-label {
        padding: 6px 8px;
        border-bottom: 1px solid #eee;
        cursor: default;
    }

    .fs-option {
        cursor: pointer;
    }

    .fs-option.hl {
        background-color: #f5f5f5;
    }

    .fs-wrap.multiple .fs-option {
        position: relative;
        padding-left: 30px;
    }

    .fs-wrap.multiple .fs-checkbox {
        position: absolute;
        display: block;
        width: 30px;
        top: 0;
        left: 0;
        bottom: 0;
    }

    .fs-wrap.multiple .fs-option .fs-checkbox i {
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 14px;
        height: 14px;
        border: 1px solid #aeaeae;
        border-radius: 2px;
        background-color: #fff;
    }

    .fs-wrap.multiple .fs-option.selected .fs-checkbox i {
        background-color: rgb(17, 169, 17);
        background-color: #2196F3;
        border-color: transparent;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC');
        background-repeat: no-repeat;
        background-position: center;
    }

    .fs-wrap .fs-option:hover {
        background-color: #f5f5f5;
    }

    .fs-optgroup-label {
        font-weight: bold;
    }

    .hidden {
        display: none;
    }
  </style>
</head>
<body>

  <div id="demo1">
  </div>
  <div id="demo2" style="margin-left: 300px;">
  </div>


  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

  <script>
          //sample:扩展jquery对象的方法，bold()用于加粗字体。
          (function ($) {
            $.fn.extend({
                mySelect: function (option) {
                  that = this
                  var htmlStr = ''

                  function buildOptions(dataArr) {
                    var choices = '';
                    dataArr.forEach(function(item,index) {
                      choices += '<div class="fs-optgroup">';
                      var optgroupLabel = option.multiple ? '<div class="fs-optgroup-label">' + item.title + '</div>' : ''
                      choices += optgroupLabel;
                      item.data.forEach(function(item1,index1) {
                        var selected = item1.isSlected ? ' selected' : '';
                        choices += '<div class="fs-option' + selected + '" data-value="' + item1.value + '">'
                          +'<span class="fs-checkbox"><i></i></span>'
                          +'<div class="fs-option-label">' + item1.label + '</div>'
                          +'</div>';
                      })
                      choices += '</div>';
                    })

                      return choices;
                  }

                  htmlStr = '<div class="fs-wrap multiple" data-mul="'+option.multiple+'">'
                    +'<div class="fs-label-wrap">'
                    +'<div class="fs-label">'+option.labelName+'</div>'
                    +'<span class="fs-arrow"></span>'
                    +'</div>'
                    +'<div class="fs-dropdown hidden">'
                      +'<div class="fs-options">'
                        +'</div>'
                      +'</div>'
                    +'</div>'
                  that.html(htmlStr)
                  var choices = buildOptions(option.source)
                  $(option.el+' .fs-options').html(choices)

                  // 显示隐藏
                  $(document).off('click','.fs-label-wrap').on('click','.fs-label-wrap', function(e) {
                    // console.log(e);
                    var $el = $(e.target);
                    var $wrap = $el.closest('.fs-wrap');
                    var isHidden = $wrap.find('.fs-dropdown').hasClass('hidden')
                    if(isHidden){
                      $wrap.find('.fs-dropdown').removeClass('hidden');
                    }else{
                      $wrap.find('.fs-dropdown').addClass('hidden');
                    }
                  });

                  // 选择
                  $(document).off('click','.fs-option').on('click','.fs-option', function(e) {
                    var $el = $(e.currentTarget);
                    // var $optgroup = $el.closest('.fs-optgroup');
                    var $optgroup = $(this).closest('.fs-optgroup');

                    var $wrap = $(this).closest('.fs-wrap');
                    var isMul = $wrap.attr('data-mul')
                    console.log(isMul);

                    if(isMul === 'false'){
                      $optgroup.find('.fs-option').removeClass('selected')
                    }

                    $(this).toggleClass('selected');
                    var selected = [];
                    $optgroup.find('.fs-option.selected').each(function(i, el) {
                        selected.push($(el).attr('data-value'));
                    });
                    console.log(selected);
                  });

                }
            });
        })(jQuery);</script>

  <script>
      $(function() {


          var _option = {
            el:'#demo1',
            multiple:true,
            labelName:'头标题',
            source:[
              {
                title:'吃的',
                data:[{
                  value: '选项1',
                  label: '黄金糕',
                  isSlected:true
                }, {
                  value: '选项2',
                  label: '双皮奶',
                  isSlected:true
                }, {
                  value: '选项3',
                  label: '蚵仔煎',
                  isSlected:true
                }, {
                  value: '选项4',
                  label: '龙须面',
                  isSlected:true
                }, {
                  value: '选项5',
                  label: '北京烤鸭',
                  isSlected:true
                }]
              },
              {
                title:'吃的好',
                data:[{
                  value: '选项1',
                  label: '黄金糕',
                  isSlected:true
                }, {
                  value: '选项2',
                  label: '双皮奶',
                  isSlected:true
                }, {
                  value: '选项3',
                  label: '蚵仔煎',
                  isSlected:true
                }, {
                  value: '选项4',
                  label: '龙须面',
                  isSlected:true
                }, {
                  value: '选项5',
                  label: '北京烤鸭',
                  isSlected:true
                }]
              },
            ]
          }
          var _option1 = {
            el:'#demo2',
            multiple:false,
            labelName:'头标题',
            source:[
              {
                title:'吃的',
                data:[{
                  value: '选项1',
                  label: '黄金糕',
                  isSlected:true
                }, {
                  value: '选项2',
                  label: '双皮奶',
                  isSlected:true
                }, {
                  value: '选项3',
                  label: '蚵仔煎',
                  isSlected:true
                }, {
                  value: '选项4',
                  label: '龙须面',
                  isSlected:true
                }, {
                  value: '选项5',
                  label: '北京烤鸭',
                  isSlected:true
                }]
              }
            ]
          }

          $('#demo1').mySelect(_option)
          $('#demo2').mySelect(_option1)
      });
  </script>
</body>
</html>

　　

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
body{
  background: #2286b6;  
}


    .fs-wrap {
        position: relative;
        display: inline-block;
        width: 200px;
        font-size: 12px;
        line-height: 1;
    }

    .fs-label-wrap {
        color: #fff;
        position: relative;
        border: 1px solid #ccc;
        cursor: default;
    }

    .fs-label-wrap,
    .fs-dropdown {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .fs-label-wrap .fs-label {
        padding: 4px 22px 4px 8px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 16px;
    }

    .fs-arrow {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 4px solid #fff;
        position: absolute;
        top: 0;
        right: 5px;
        bottom: 0;
        margin: auto;
    }

    .fs-dropdown {
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        margin-top: 5px;
        width: 100%;
        z-index: 1000;
    }

    .fs-dropdown .fs-options {
        max-height: 200px;
        overflow: auto;
    }

    .fs-search input {
        width: 100%;
        padding: 2px 4px;
        border: 0;
    }

    .fs-option,
    .fs-search,
    .fs-optgroup-label {
        padding: 6px 8px;
        border-bottom: 1px solid #eee;
        cursor: default;
    }

    .fs-option {
        cursor: pointer;
    }

    .fs-option.hl {
        background-color: #f5f5f5;
    }

    .fs-wrap.multiple .fs-option {
        position: relative;
        padding-left: 30px;
    }

    .fs-wrap.multiple .fs-checkbox {
        position: absolute;
        display: block;
        width: 30px;
        top: 0;
        left: 0;
        bottom: 0;
    }

    .fs-wrap.multiple .fs-option .fs-checkbox i {
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 14px;
        height: 14px;
        border: 1px solid #aeaeae;
        border-radius: 2px;
        background-color: #fff;
    }

    .fs-wrap.multiple .fs-option.selected .fs-checkbox i {
        background-color: rgb(17, 169, 17);
        background-color: #2196F3;
        border-color: transparent;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC');
        background-repeat: no-repeat;
        background-position: center;
    }

    .fs-wrap .fs-option:hover {
        background-color: #f5f5f5;
    }

    .fs-optgroup-label {
        font-weight: bold;
    }

    .hidden {
        display: none;
    }    
  </style>
</head>
<body>

  <div id="demo1">
  </div>
  <div id="demo2" style="margin-left: 300px;">
  </div>
  

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

  <script>
          //sample:扩展jquery对象的方法，bold()用于加粗字体。
          (function ($) {
            $.fn.extend({
                mySelect: function (option) {
                  that = this
                  var htmlStr = ''
                  
                  function buildOptions(dataArr) {
                    var choices = '';
                    dataArr.forEach(function(item,index) {
                      choices += '<div class="fs-optgroup">';
                      var optgroupLabel = option.multiple ? '<div class="fs-optgroup-label">' + item.title + '</div>' : ''
                      choices += optgroupLabel;
                      item.data.forEach(function(item1,index1) {
                        var selected = item1.isSlected ? ' selected' : '';
                        choices += '<div class="fs-option' + selected + '" data-value="' + item1.value + '">'
                          +'<span class="fs-checkbox"><i></i></span>'
                          +'<div class="fs-option-label">' + item1.label + '</div>'
                          +'</div>';
                      })
                      choices += '</div>';
                    })

                      return choices;
                  }              
                  
                  htmlStr = '<div class="fs-wrap multiple" data-mul="'+option.multiple+'">'
                    +'<div class="fs-label-wrap">'
                    +'<div class="fs-label">'+option.labelName+'</div>'
                    +'<span class="fs-arrow"></span>'
                    +'</div>'
                    +'<div class="fs-dropdown hidden">'
                      +'<div class="fs-options">'
                        +'</div>'
                      +'</div>'
                    +'</div>'
                  that.html(htmlStr)
                  var choices = buildOptions(option.source)
                  $(option.el+' .fs-options').html(choices)
                  
                  // 显示隐藏
                  $(document).off('click','.fs-label-wrap').on('click','.fs-label-wrap', function(e) {
                    // console.log(e);
                    var $el = $(e.target);
                    var $wrap = $el.closest('.fs-wrap');
                    var isHidden = $wrap.find('.fs-dropdown').hasClass('hidden')
                    if(isHidden){
                      $wrap.find('.fs-dropdown').removeClass('hidden');
                    }else{
                      $wrap.find('.fs-dropdown').addClass('hidden');
                    }
                  });

                  // 选择
                  $(document).off('click','.fs-option').on('click','.fs-option', function(e) {
                    var $el = $(e.currentTarget);
                    // var $optgroup = $el.closest('.fs-optgroup');
                    var $optgroup = $(this).closest('.fs-optgroup');
                    
                    var $wrap = $(this).closest('.fs-wrap');
                    var isMul = $wrap.attr('data-mul')
                    console.log(isMul);
                    
                    if(isMul === 'false'){
                      $optgroup.find('.fs-option').removeClass('selected')
                    }

                    $(this).toggleClass('selected');
                    var selected = [];
                    $optgroup.find('.fs-option.selected').each(function(i, el) {
                        selected.push($(el).attr('data-value'));
                    });                    
                    console.log(selected);
                  });

                }
            });
        })(jQuery);</script>

  <script>
      $(function() {


          var _option = {
            el:'#demo1',
            multiple:true,
            labelName:'头标题',
            source:[
              {
                title:'吃的',
                data:[{
                  value: '选项1',
                  label: '黄金糕',
                  isSlected:true
                }, {
                  value: '选项2',
                  label: '双皮奶',
                  isSlected:true
                }, {
                  value: '选项3',
                  label: '蚵仔煎',
                  isSlected:true
                }, {
                  value: '选项4',
                  label: '龙须面',
                  isSlected:true
                }, {
                  value: '选项5',
                  label: '北京烤鸭',
                  isSlected:true
                }]
              },
              {
                title:'吃的好',
                data:[{
                  value: '选项1',
                  label: '黄金糕',
                  isSlected:true
                }, {
                  value: '选项2',
                  label: '双皮奶',
                  isSlected:true
                }, {
                  value: '选项3',
                  label: '蚵仔煎',
                  isSlected:true
                }, {
                  value: '选项4',
                  label: '龙须面',
                  isSlected:true
                }, {
                  value: '选项5',
                  label: '北京烤鸭',
                  isSlected:true
                }]
              },
            ]
          }
          var _option1 = {
            el:'#demo2',
            multiple:false,
            labelName:'头标题',
            source:[
              {
                title:'吃的',
                data:[{
                  value: '选项1',
                  label: '黄金糕',
                  isSlected:true
                }, {
                  value: '选项2',
                  label: '双皮奶',
                  isSlected:true
                }, {
                  value: '选项3',
                  label: '蚵仔煎',
                  isSlected:true
                }, {
                  value: '选项4',
                  label: '龙须面',
                  isSlected:true
                }, {
                  value: '选项5',
                  label: '北京烤鸭',
                  isSlected:true
                }]
              }
            ]
          }
          
          $('#demo1').mySelect(_option)
          $('#demo2').mySelect(_option1)
      });
  </script>  
</body>
</html>
12-24 00:39
Powered by LMLPHP ©2025  va 0.072221