溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jQuery+vue.js實現(xiàn)的多選下拉列表功能示例

發(fā)布時間:2020-08-29 21:24:15 來源:腳本之家 閱讀:181 作者:皮卡洛 欄目:web開發(fā)

本文實例講述了jQuery+vue.js實現(xiàn)的多選下拉列表功能。分享給大家供大家參考,具體如下:

其實就是實現(xiàn)一個多選下拉列表,然后將選中的選項顯示到相應(yīng)的位置;

因為主要是jQuery選中行為的實現(xiàn),所以,樣式結(jié)構(gòu)就不多說啦,直接貼代碼啦:

<!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">
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script>
  <title>多選下拉</title>
</head>
<body>
    <div class="zj-div">
     <div class="btn">全部級別</div>
     <ul>
      <li class='list' v-for="item in myData">{{item}}</li>
     </ul>
    </div>
</body>
</html>

li表單我這里利用了vue進行了簡單的的雙向數(shù)據(jù)綁定,哈哈哈  也是很偷懶啦

*{
 padding: 0px;
 margin: 0px;
}
.zj-div{
 position: relative;
 left: 50px;
 top: 50px;
}
.btn,li{
 width: 200px;
 height: 50px;
 border: 1px solid #01bfda;
 border-radius: 15px;
 background: #000d16;
 color:white;
 line-height: 50px;
 text-align: center;
 font-size: 18px;
}
ul {
 display: none;
 width: 220px;
}
li {
 list-style: none;
}
li:hover{
 cursor: pointer;
 background: #535a5c;
}
li[check="true"] {
 background: #01bfda;
}

有一點需要注意的是,因為要實現(xiàn)多選,我想的是,選中的項與未選中的項通過不同的背景顏色進行區(qū)分;

所以就綁定了check屬性,當(dāng)check='true'時,背景顏色不同;

下面就是重點啦,畫圈圈~~~

真的完全是利用自己的“強大”邏輯思維實現(xiàn)的,哈哈哈,也是很冗余啦~

因為不想直接引用組件,所以心血來潮就自己動手了,代碼中估計都能看出我的思考過程了吧~~~~

可以說是很費勁了,奈何因為方法不熟悉加上不太了解如何優(yōu)化,用的最笨的方法-----根據(jù)最后要達到的目標(biāo),考慮會出現(xiàn)的情況,完成的最初的版本但也是最好理解的版本(雖然我都嫌棄有點長):

    new Vue({
     el:".zj-div",
     data:{
      myData:["全部級別","一級","二級","三級"],
     }
    })
   $(document).ready(function(){
     var len = $('ul').children('li').length;
     $('.btn').click(function(e) {
      $('ul').slideToggle();
      e.stopPropagation();
    });                      //點擊.btn實現(xiàn)ul的收放
    $(document).not($('.list')).click(function(e){
       $('ul').slideUp();
      })                    //.not方法就是除去當(dāng)前這個元素
                           //點擊頁面除了li的其他部分時,ul收起
    for(let i = 0; i < len; i++){
     var firstAll = $('ul').children().first();
     var arr = [];                //為綁定.btn的值創(chuàng)建一個數(shù)組
     $('li').eq(i).click(function(e){
      e.stopPropagation();           //因為事件冒泡機制,一定要注意取消時間冒泡
      if($(this).attr('check')!=="true"){
        if($(this).text()=="全部級別"){    //如果當(dāng)前點擊的是“全部級別”,則所有的li背景都改變
           $(this).attr('check','true');
           $(this).siblings().attr('check',"true");
           // arr.push($(this).text());
           $('.btn').text($(this).text());
           arr = ["一級","二級","三級"];
                           //此時.btn顯示"全部級別"
        }else{
         $(this).attr('check','true');    //如果當(dāng)前點擊的li是其他的,則當(dāng)前l(fā)i背景改變
          if(arr.includes($(this).text())){
           $('.btn').text(arr);       //分情況討論此時.btn應(yīng)該如何顯示
          }else{               //注意結(jié)合arr
           arr.push($(this).text());
           $('.btn').text(arr);
          }
        }
        if($(this).text()!=="全部級別"&&firstAll.next().attr('check')=='true'&&firstAll.next().next().attr('check')=='true'&&firstAll.next().next().next().attr('check')=='true'){
         $('ul').children().first().attr('check','true');
         $('.btn').text($('ul').children().first().text());
        }                    //if判斷語句,我覺得肯定有其他的方法,我這個簡直太簡單粗暴了,可是我還沒想到...
                            //這是我們應(yīng)該考慮的一種情況,當(dāng)其他幾項全選時,"全部級別"應(yīng)該默認被選中
      }else{
        if($(this).text()=="全部級別"){     //同理,當(dāng)當(dāng)前元素被選中,再被點擊時要取消選中
         $(this).attr('check','false');
         $(this).siblings().attr('check',"false");
         $('.btn').text($(this).text());    //注意此時,雖然.btn顯示為"全部級別"
         arr = [];               //但實際上沒有任何元素被選中,所以arr實際為空
        }else{
         $(this).attr('check','false');
         $('ul').children().first().attr('check','false');
          for(var a = 0 ; a < arr.length; a++){
           if(arr[a] == $(this).text()){
            arr.splice(a,1);              //數(shù)組方法,刪除索引為a的一個元素
            $('.btn').text(arr);
            if(arr.length == 0){             //如果arr數(shù)據(jù)為空,那么.btn顯示"全部級別"
             $('.btn').text(firstAll.text())
            }
           }
          }
        }
      }
    })
   }
  })

見解也就添加到注釋里面啦~~哈哈哈  反正也是自己看  吼吼吼~~~

好啦  效果圖:

jQuery+vue.js實現(xiàn)的多選下拉列表功能示例

慢慢的學(xué)習(xí)下來,我算是真的發(fā)現(xiàn),好多東西,在真正動手前總覺得好像蠻簡單,可一旦入坑,就會陷入長久的困惑......

去做的過程中,總會發(fā)現(xiàn)新的問題~~~所以   我就記一下,免得下次又有同樣的需求,我又要重新思考  哈哈哈哈  也是很偷懶啦~~~畢竟  嗯  記憶力太差

That`s  all~~

Happy  Ending!!!

這里再給出一個完整示例代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script>
<title>www.jb51.net 多選下拉</title>
<style>
*{
 padding: 0px;
 margin: 0px;
}
.zj-div{
 position: relative;
 left: 50px;
 top: 50px;
}
.btn,li{
 width: 200px;
 height: 50px;
 border: 1px solid #01bfda;
 border-radius: 15px;
 background: #000d16;
 color:white;
 line-height: 50px;
 text-align: center;
 font-size: 18px;
}
ul {
 display: none;
 width: 220px;
}
li {
 list-style: none;
}
li:hover{
 cursor: pointer;
 background: #535a5c;
}
li[check="true"] {
 background: #01bfda;
}
</style>
</head>
<body>
    <div class="zj-div">
     <div class="btn">全部級別</div>
     <ul>
      <li class='list' v-for="item in myData">{{item}}</li>
     </ul>
    </div>
<script>
    new Vue({
     el:".zj-div",
     data:{
      myData:["全部級別","一級","二級","三級"],
     }
    })
   $(document).ready(function(){
     var len = $('ul').children('li').length;
     $('.btn').click(function(e) {
      $('ul').slideToggle();
      e.stopPropagation();
    });                      //點擊.btn實現(xiàn)ul的收放
    $(document).not($('.list')).click(function(e){
       $('ul').slideUp();
      })                    //.not方法就是除去當(dāng)前這個元素
                           //點擊頁面除了li的其他部分時,ul收起
    for(let i = 0; i < len; i++){
     var firstAll = $('ul').children().first();
     var arr = [];                //為綁定.btn的值創(chuàng)建一個數(shù)組
     $('li').eq(i).click(function(e){
      e.stopPropagation();           //因為事件冒泡機制,一定要注意取消時間冒泡
      if($(this).attr('check')!=="true"){
        if($(this).text()=="全部級別"){    //如果當(dāng)前點擊的是“全部級別”,則所有的li背景都改變
           $(this).attr('check','true');
           $(this).siblings().attr('check',"true");
           // arr.push($(this).text());
           $('.btn').text($(this).text());
           arr = ["一級","二級","三級"];
                           //此時.btn顯示"全部級別"
        }else{
         $(this).attr('check','true');    //如果當(dāng)前點擊的li是其他的,則當(dāng)前l(fā)i背景改變
          if(arr.includes($(this).text())){
           $('.btn').text(arr);       //分情況討論此時.btn應(yīng)該如何顯示
          }else{               //注意結(jié)合arr
           arr.push($(this).text());
           $('.btn').text(arr);
          }
        }
        if($(this).text()!=="全部級別"&&firstAll.next().attr('check')=='true'&&firstAll.next().next().attr('check')=='true'&&firstAll.next().next().next().attr('check')=='true'){
         $('ul').children().first().attr('check','true');
         $('.btn').text($('ul').children().first().text());
        }                    //if判斷語句,我覺得肯定有其他的方法,我這個簡直太簡單粗暴了,可是我還沒想到...
                            //這是我們應(yīng)該考慮的一種情況,當(dāng)其他幾項全選時,"全部級別"應(yīng)該默認被選中
      }else{
        if($(this).text()=="全部級別"){     //同理,當(dāng)當(dāng)前元素被選中,再被點擊時要取消選中
         $(this).attr('check','false');
         $(this).siblings().attr('check',"false");
         $('.btn').text($(this).text());    //注意此時,雖然.btn顯示為"全部級別"
         arr = [];               //但實際上沒有任何元素被選中,所以arr實際為空
        }else{
         $(this).attr('check','false');
         $('ul').children().first().attr('check','false');
          for(var a = 0 ; a < arr.length; a++){
           if(arr[a] == $(this).text()){
            arr.splice(a,1);              //數(shù)組方法,刪除索引為a的一個元素
            $('.btn').text(arr);
            if(arr.length == 0){             //如果arr數(shù)據(jù)為空,那么.btn顯示"全部級別"
             $('.btn').text(firstAll.text())
            }
           }
          }
        }
      }
    })
   }
  })
</script>
</body>
</html>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun運行上述代碼,測試運行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

向AI問一下細節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI