编程 Javascript jQuery

jQuery+vue.js实现的多选下拉列表功能示例

Posted in jQuery onJanuary 15, 2019

本文实例讲述了jQuery+vue.js实现的多选下拉列表功能。分享给大家供大家参考，具体如下：

其实就是实现一个多选下拉列表，然后将选中的选项显示到相应的位置；

因为主要是jQuery选中行为的实现，所以，样式结构就不多说啦，直接贴代码啦：

<!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进行了简单的的双向数据绑定，哈哈哈也是很偷懒啦

*{
 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;
}

有一点需要注意的是，因为要实现多选，我想的是，选中的项与未选中的项通过不同的背景颜色进行区分；

所以就绑定了check属性，当check='true'时，背景颜色不同；

下面就是重点啦，画圈圈~~~

真的完全是利用自己的“强大”逻辑思维实现的，哈哈哈，也是很冗余啦~

因为不想直接引用组件，所以心血来潮就自己动手了，代码中估计都能看出我的思考过程了吧~~~~

可以说是很费劲了，奈何因为方法不熟悉加上不太了解如何优化，用的最笨的方法-----根据最后要达到的目标，考虑会出现的情况，完成的最初的版本但也是最好理解的版本（虽然我都嫌弃有点长）：

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实现ul的收放
    $(document).not($('.list')).click(function(e){
       $('ul').slideUp();
      })                    //.not方法就是除去当前这个元素
                           //点击页面除了li的其他部分时，ul收起
    for(let i = 0; i < len; i++){
     var firstAll = $('ul').children().first();
     var arr = [];                //为绑定.btn的值创建一个数组
     $('li').eq(i).click(function(e){
      e.stopPropagation();           //因为事件冒泡机制，一定要注意取消时间冒泡
      if($(this).attr('check')!=="true"){
        if($(this).text()=="全部级别"){    //如果当前点击的是“全部级别”，则所有的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');    //如果当前点击的li是其他的，则当前li背景改变
          if(arr.includes($(this).text())){
           $('.btn').text(arr);       //分情况讨论此时.btn应该如何显示
          }else{               //注意结合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判断语句，我觉得肯定有其他的方法，我这个简直太简单粗暴了，可是我还没想到...
                            //这是我们应该考虑的一种情况，当其他几项全选时，"全部级别"应该默认被选中
      }else{
        if($(this).text()=="全部级别"){     //同理，当当前元素被选中，再被点击时要取消选中
         $(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);              //数组方法，删除索引为a的一个元素
            $('.btn').text(arr);
            if(arr.length == 0){             //如果arr数据为空，那么.btn显示"全部级别"
             $('.btn').text(firstAll.text())
            }
           }
          }
        }
      }
    })
   }
  })

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

好啦效果图：

jQuery+vue.js实现的多选下拉列表功能示例

慢慢的学习下来，我算是真的发现，好多东西，在真正动手前总觉得好像蛮简单，可一旦入坑，就会陷入长久的困惑......

去做的过程中，总会发现新的问题~~~所以我就记一下，免得下次又有同样的需求，我又要重新思考哈哈哈哈也是很偷懒啦~~~毕竟嗯记忆力太差

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>3water.com 多选下拉</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实现ul的收放
    $(document).not($('.list')).click(function(e){
       $('ul').slideUp();
      })                    //.not方法就是除去当前这个元素
                           //点击页面除了li的其他部分时，ul收起
    for(let i = 0; i < len; i++){
     var firstAll = $('ul').children().first();
     var arr = [];                //为绑定.btn的值创建一个数组
     $('li').eq(i).click(function(e){
      e.stopPropagation();           //因为事件冒泡机制，一定要注意取消时间冒泡
      if($(this).attr('check')!=="true"){
        if($(this).text()=="全部级别"){    //如果当前点击的是“全部级别”，则所有的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');    //如果当前点击的li是其他的，则当前li背景改变
          if(arr.includes($(this).text())){
           $('.btn').text(arr);       //分情况讨论此时.btn应该如何显示
          }else{               //注意结合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判断语句，我觉得肯定有其他的方法，我这个简直太简单粗暴了，可是我还没想到...
                            //这是我们应该考虑的一种情况，当其他几项全选时，"全部级别"应该默认被选中
      }else{
        if($(this).text()=="全部级别"){     //同理，当当前元素被选中，再被点击时要取消选中
         $(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);              //数组方法，删除索引为a的一个元素
            $('.btn').text(arr);
            if(arr.length == 0){             //如果arr数据为空，那么.btn显示"全部级别"
             $('.btn').text(firstAll.text())
            }
           }
          }
        }
      }
    })
   }
  })
</script>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.3water.com/code/HtmlJsRun运行上述代码，测试运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery+vue.js实现的多选下拉列表功能示例

- Author -

皮卡洛

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐

jQuery实现选中行变色效果(实例讲解)

Jul 06 jQuery

jquery操作ul的一些操作笔记整理(干货)

Aug 31 jQuery

使用JQuery实现图片轮播效果的实例(推荐)

Oct 24 jQuery

利用JQUERY实现多个AJAX请求等待的实例

Dec 14 jQuery

Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法

Aug 09 jQuery

jQuery实现网页拼图游戏

Apr 22 jQuery

jQuery实现的自定义轮播图功能详解

Dec 28 jQuery

jQuery实现的简单歌词滚动功能示例

Jan 07 jQuery

jQuery子选择器与可见性选择器实例分析

Jun 28 jQuery

jQuery实现图片随机切换、抽奖功能(实例代码)

Oct 23 jQuery

jQuery表单校验插件validator使用方法详解

Feb 18 jQuery

jQuery实现滑动开关效果

Aug 02 jQuery

jQuery实现的中英文切换功能示例

Jan 11 #jQuery

jQuery简单实现根据日期计算星期几的方法

Jan 09 #jQuery

jQuery实现根据身份证号获取生日、年龄、性别等信息的方法

Jan 09 #jQuery

JQuery搜索框自动补全(模糊匹配)功能实现示例

Jan 08 #jQuery

jQuery实现的别踩白块小游戏完整示例

Jan 07 #jQuery

jQuery判断自定义属性data-val用法示例

Jan 07 #jQuery

jQuery实现的简单歌词滚动功能示例

Jan 07 #jQuery