自定義的可分類可搜索的下拉框組件

来源:https://www.cnblogs.com/chenyingying0/archive/2020/01/19/12215387.html
-Advertisement-
Play Games

效果圖 註：值是根據原生select中的值來動態獲取併進行分類 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" ...


效果圖

 

 註：值是根據原生select中的值來動態獲取併進行分類

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
      <div id="wrap">
      <div class="div1">
        <div class="title">自定義select</div>

        <div class="select">
          <select id="select-name">
            <option value="" disabled="true">請選擇</option>

          </select>
          <div class="s select-box">
            <div class="s select-head">
              <span class="s">未選擇</span>
              <i class="s"></i>
            </div>
            <div class="s select-body">
              <div class="s search-input">
                <input class="s" type="text" placeholder="搜索">
                <i class="s"></i>
              </div>
              <div class="s value-body">

              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="outdiv">
        <p id="out"></p>
      </div>

    
      <div class="div2">
        <div class="title">原生select</div>
        <select>
          <option value="1" type="構建工具">Babel</option>
          <option value="2" type="構建工具">Webpack</option>
          <option value="3" type="構建工具">Rollup</option>
          <option value="4" type="前端框架">Vue</option>
          <option value="5" type="前端框架">Angular</option>
          <option value="6" type="前端框架">React</option>
          <option value="7" type="前端框架">Nerv</option>
        </select>
      </div>
    </div>
  </div>
  <script src="index.js"></script>
</body>
</html>

style.css

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

div.select-box{
    width: 200px;
    margin: 20px 20px;
}

div.select-head{
    position: relative;
    height: 30px;
    width: 100%;
    display: flex;
    border: solid 1px rgb(75,151,251);
    align-items: center;
    cursor: pointer;
}

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

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

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

div.select-body{
    display: none;
    width: 100%;
    border: solid 1px rgb(75,151,251);
    border-top: none;
}

div.search-input{
    position: relative;
    height: 40px;
}

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

div.search-input i{
    position: absolute;
    display: block;
    height: 20px;
    width: 20px;
    top: 12px;
    right: 15px;
    background-image: url(./search-normal.png);
    background-size: 20px 20px;
    cursor: pointer;
}

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

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

div.value-body li{
    display: flex;
    height: 24px;
    padding: 5px 5px 5px 30px;
    font-size: 14px;
    align-items: center;
    cursor: pointer;
    position: relative;
}

div.value-body span{
    display: block;
    font-weight: bold;
    font-size: 16px;
    margin:10px;
}

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

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

div.value-body li.active{
    background-color: rgb(75,151,251);
    color:white;
}

div.value-body li.none,div.none{
    display: none;
}

div.value-body div{
    text-align: center;
    height: 30px;
    line-height: 30px;
    color: #AAA;
}

index.js

    window.onload = function () {

      //初始化生成DOM元素
      function 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( function(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( function(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 = function () {
        //清空輸入框內容
        document.querySelector('div.search-input>input').value = ''

        document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
          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'
        else 
          select_body.style.display = 'block'
      };

      /**
       * 點擊空白處關閉select框
       */
      document.onclick = function (argument) {
        if(!argument.target.classList.contains('s')){
          var select_body = document.querySelector('div.select-body')
          if (select_body.style.display == 'block') 
            select_body.style.display = 'none'
        }
      }

      /**
       * 自定義的select的選值功能
       */
      document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
        element.onclick = function () {
          //初始化下樣式
          document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
            element.classList = ''
          });
          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 = function () {
        var input_value = document.querySelector('div.search-input>input').value
        if(input_value == '') {
          document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
            if (element.classList.contains('active')) {
              element.classList = 'active'
            }else {
              element.classList = ''
            }
          });
        }else{
          document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
            if(element.getAttribute('data-value').toLowerCase().indexOf(input_value.toLowerCase()) == -1){
                if (element.classList.contains('active')) {
                  element.classList += ' none'
                }else {
                  element.classList = 'none'
                }
            }else {
              if(element.classList.contains('none')) {
                document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
                  if (element.classList.contains('active')) {
                    element.classList = 'active'
                  }else {
                    element.classList = ''
                  }
                });
              }
            }
          });
        }
        //記一下結果數量
        var length = 0
        document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
          if (!element.classList.contains('none')) length++
        });
        
        if (length == 0) {
          document.querySelector('div.value-body>li').classList = ''
        }else{
          document.querySelector('div.value-body>li').classList = 'none'
        }
      }


    };

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySql筆記(二)
    一幅畫，一次瞬間的回眸，就在那次畫展上，那個眼神，溫柔的流轉，還是那乾凈的皮鞋，一塵不染，俊朗的眉宇性感的唇，悄悄走近，牽手一段浪漫 [toc] MySQL筆記(二) 13、條件查詢 1.普通條件查詢 語法：SELECT COL_LIST FROM TABLE_NAME [WHERE CONDITI ...
  • MySql筆記(一)
    每天給自己一個希望，努力做好自己，不為明天煩惱，不為昨天嘆息。當夢想還在，告訴自己：努力，就總能遇見更好的自己! [toc] MySql筆記(一) 1、創建資料庫以及刪除 1.創建資料庫語法：（命令行視窗操作） ~~~~sql CREATE DATABASE DATABASENAME ~~~~ 示例 ...
  • Redis-非同步消息
    關於非同步消息，大家都知道，如下： 這些用起來都是比較複雜的，RabbitMQ先要創建Exchange,在創建Queue,還要將Queue和Exchange通過某種規則綁定起來。發消息之前要指定routing-Key，還要控制頭部信息。 即使你只需要一組消息者。那麼你就要經歷上面繁瑣的過程。 但是Re ...
  • flink編譯支持CDH6.2.0（hadoop3.0.0）
    準備工作 因為在編譯時需要下載許多依賴包，在執行編譯前最好先配置下代理倉庫 編譯flink shaded 因為flink依賴flink shaded工程，基本的依賴項都是在這個工程裡面定義的，所以要先編譯這個工程 1. 下載flink shaded工程 "flink shaded" 1. 在寫文章時 ...
  • 一起學Vue之表單輸入綁定
    在Vue進行前端開發中，表單的輸入是基礎且常見的功能，本文以一個簡單的小例子，簡述v-model數據綁定的用法，僅供學習分享使用，如有不足，還請指正。 ...
  • 具名插槽、作用域插槽的新寫法
    插槽 1. 具名插槽 自 2.6.0 起有所更新。已廢棄的使用 attribute 的語法 但是我們有了新的語法，如下： 子組件 childCom: 父組件 app: 效果圖： 註意： 只能添加在 上 2. 作用域插槽 有時讓插槽內容能夠訪問子組件中才有的數據是很有用的。但是由於子組件的作用域在子組 ...
  • 組件使用v-model、$listeners、.sync(區別於v-model的雙向數據綁定)
    自定義組件 1. 自定義組件的v model 首先我們先說一下在自定義組件中使用v model的必要條件 在自定義的組件中要有input(這裡我們先不討論單選覆選框) 在自定義組件的模板對象中要有props屬性，且裡面要含有一個value 在自定義組件的input標簽上要綁定value屬性值為pro ...
  • Prop驗證、inheritAttrs、$attrs的用法和坑
    Prop 1. Prop驗證 javascript Vue.component('my component', { props: { // 基礎的類型檢查 ( 和 會通過任何類型驗證) propA: Number, // 多個可能的類型 propB: [String, Number], // 必填的 ...
一周排行
    -Advertisement-
    Play Games
  • .NET 6 Entity Framework Core Db First（1） 創建模型
    .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 資料庫升級PostgreSql+Garnet
    目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊，後續可能不再更新Garne ...
  • 如何基於surging架設流媒體視頻推流（視頻講解）
    C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了，幾乎是無縫銜接，很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高，我只要會調用方法就行。這個系統交付之後不會有太多問題，更多應該是做小需求，有大的開發任務應該也是第二期的事，嗯？怎麼感覺我變成運維了？而 ...
  • EAV模型（實體-屬性-值）的設計和低代碼的處理方案（2）--數據的查詢處理
    我在隨筆《EAV模型（實體-屬性-值）的設計和低代碼的處理方案（1）》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼（或者說無代碼）的一些實現思路，在本篇隨筆中，我們來分析一下這種針對通用業務，且只需定義就能構建業務模塊存儲和界面的解決方案，其中的數據查詢處理的操作。 ...
  • C# 程式集、模塊和類型概念及關係
    對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1，這將啟用NTP伺服器功 ...
  • Django信號與擴展：深入理解與實踐
    title: Django信號與擴展：深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分：Django信號基礎 Djan ...
  • Django3.2安裝源碼xadmin2步驟以及遇到的問題
    使用xadmin2遇到的問題&解決 環境配置： 使用的模塊版本： 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 原創->CommonsCollections1-DefaultMap鏈
    今天我打算整點兒不一樣的內容，通過之前學習的TransformerMap和LazyMap鏈，想搞點不一樣的，所以我關註了另外一條鏈DefaultedMap鏈，主要調用鏈為： 調用鏈詳細描述： ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 05-應用級開發者 AI 時代破局點
    後端應用級開發者該如何擁抱 AI GC？就是在這樣的一個大的浪潮下，我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型，跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好，或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • Java面試題：讓依賴註入變得簡單，面對@Autowired和@Resource，該如何選擇？
    @Autowired是Spring框架提供的註解，@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配，而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean，而@Resourc... ...
所有分類