自定义的可分类可搜索的下拉框组件

注：值是根据原生select中的值来动态获取并进行分类

index.html

<!DOCTYPE html>
<html lang="en"head>
    Meta charset="UTF-8"title>index</>
  link rel="stylesheet" href="style.css"bodydiv class="container">
      id="wrap"="div1">
        ="title">自定义selectdiv>

        ="select">
          select ="select-name">
            option value="" disabled="true">请选择option>

          select="s select-Box"="s select-head">
              span ="s">未选择spani ></i="s select-body"="s search-input">
                input ="s" type="text" placeholder="搜索"="s value-body">

              >

      ="outdiv"p ="out"p>

    
      ="div2">原生select="1"="构建工具">Babel="2">Webpack="3">Rollup="4"="前端框架">Vue="5">Angular="6">React="7">Nervscript src="index.js"scripthtml>

style.css

.container{
    width:100%;
    height:100vh;
    text-align: center;
}
#wrap{170px;
    position: relative;
    top:50%;
    margin-top:-85px;
.div1{
.div2{
.title{
    color: rgb(75,151,251);
    margin-bottom: 10px;
}
div.select{ 200px;
    left: 50%;
    margin-left: -100px;
}
div.select select{
    display: none;
}

div.select-Box{
    margin: 20px 20px;
}

div.select-head{ 30px; 100%; flex;
    border: solid 1px rgb(75,1)">
    align-items: center;
    cursor: pointer;
}

div.select-head span{
    font-size: 16px; 5px; #AAA;
}

div.select-head span.fill{ #000;
}

div.select-head i{ absolute;
    right: -1px;
    background: url(./arrow.png) center center no-repeat;
    background-size: 30px auto;
}

div.select-body{ none;
    border-top:

div.search-input{ 40px;
}

div.search-input input{ 150px; 5px 8px;
    text-indent: 10px;
    padding-right: 30px;
}

div.search-input i{ block; 20px; 12px; 15px;
    background-image: url(./search-normal.png); 20px 20px;

div.search-input i:hover{ url(./search-active.png);
}

div.value-body{
    max-height:
    overflow-y: auto; left;
    overflow-x: hidden;
}

div.value-body li{ 24px;
    padding: 5px 5px 5px 30px; 14px; pointer; relative;
}

div.value-body span{
    font-weight: bold;10px;
}

div.value-body span+li{ 14px;
}

div.value-body li:hover,li.active{
    background-color: #F5F6FA;
}

div.value-body li.active{white;
}

div.value-body li.none,div.none{

div.value-body div{
    line-height: #AAA;
}

index.js

    window.onload = function () {

      //初始化生成DOM元素
       init(){
        var types=[];
         根据原生的select中的每一项提供的类型和值，使用脚本获取，然后进行分类重新显示
        var options=document.querySelectorAll('.div2 option');
        var templates='';插入到select的总模板
        var se_templates='';插入到div的总模板
        var tem='';select 某个分类的总模板
        var se_tem='';div 某个分类的总模板

        options.forEach( (element,index) {
            var type=element.getAttribute('type');

            创建分类
            if (types.indexOf(type)==-1){
              types.push(type)

              tem=`<span>`+type+`</span>`;
              se_tem=`<span>`+type+`</span>`;

              var lis='';select 某个分类下的项目模板
              var se_lis='';div 某个分类下的项目模板

              根据分类创建选项
              options.forEach( (ele) {
                var value=ele.getAttribute('value');
                var text=ele.innerText;
                if(ele.getAttribute('type')==type){
                  lis+=`<li data-value="`+text+`">`+text+`</li>`;
                  se_lis+=`<option value="`+text+`">`+text+`</option>`;
                }             
              });
              tem+=lis;
              se_tem+=se_lis;
              templates+=tem; 
              se_templates+=se_tem; 
            }
                        
          });
        
        document.querySelector('.value-body').innerHTML=templates;
        document.querySelector('#select-name').innerHTML=se_templates;       
      }
      init();

      var out=document.querySelector('#out');
      var last_out='未选择--undefined';


      清空select的value
      document.querySelector('div.select>select').value = ''

      /**
       * 点击自定义的select框开启或收回选择框
       */
      document.querySelector('div.select-head').onclick =  () {
        清空输入框内容
        document.querySelector('div.search-input>input').value = ''

        document.querySelectorAll('div.value-body>li').forEach( if (element.classList.contains('active')) {
            element.classList = 'active'
          }else {
            element.classList = ''
          }
        });

         document.querySelector('div.value-body>div').classList = 'none'

        var select_body = document.querySelector('div.select-body')
        if (select_body.style.display == 'block') 
          select_body.style.display = 'none'
         
          select_body.style.display = 'block'
      };

      *
       * 点击空白处关闭select框
       
      document.onclick =  (argument) {
        if(!argument.target.classList.contains('s')){
          )
          ) 
            select_body.style.display = 'none'
        }
      }

      *
       * 自定义的select的选值功能
       
      document.querySelectorAll('div.value-body>li').forEach(  () {
          初始化下样式
          document.querySelectorAll('div.value-body>li').forEach( 
          });
          element.classList = 'active'
          更新select框的value和自定义的select框的value
          var data_value = element.getAttribute('data-value'var select_head_span = document.querySelector('div.select-head>span')
          document.querySelector('div.select>select').value = data_value
          select_head_span.innerHTML = data_value
          out.innerHTML= '之前的值是：'+last_out+'<br>改变后的值是：'+data_value
          last_out=data_value;
          if(!select_head_span.classList.contains('fill'))
            select_head_span.classList = 'fill'

          关闭select-body
          document.querySelector('div.select-body').style.display = 'none'
        }
      });

      *
       * 搜素功能实现
       
      document.querySelector('div.search-input>input').oninput = var input_value = document.querySelector('div.search-input>input').value
        if(input_value == '') {
          document.querySelectorAll('div.value-body>li').forEach( )) {
              element.classList = 'active'
            } {
              element.classList = ''
            }
          });
        }{
          document.querySelectorAll('div.value-body>li').forEach( if(element.getAttribute('data-value').toLowerCase().indexOf(input_value.toLowerCase()) == -1){
                )) {
                  element.classList += ' none'
                } {
                  element.classList = 'none'
                }
            } {
              if(element.classList.contains('none')) {
                document.querySelectorAll('div.value-body>li').forEach( )) {
                    element.classList = 'active'
                  } {
                    element.classList = ''
                  }
                });
              }
            }
          });
        }
        记一下结果数量
        var length = 0
        document.querySelectorAll('div.value-body>li').forEach( if (!element.classList.contains('none')) length++
        });
        
        if (length == 0) {
          document.querySelector('div.value-body>li').classList = ''
        }{
          document.querySelector('div.value-body>li').classList = 'none'
        }
      }


    };

自定义的可分类可搜索的下拉框组件

猜你在找的JavaScript相关文章