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 相关文章推荐
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery 实现扁平式小清新导航
Jul 07 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
You might like
PHP无限分类的类
2007/01/02 PHP
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
如何在JavaScript中正确处理变量
2020/12/25 Javascript
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
Python中functools模块的常用函数解析
2016/06/30 Python
python Pygame的具体使用讲解
2017/11/03 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
Python读写锁实现实现代码解析
2020/11/28 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
Python里面search()和match()的区别
2016/09/21 面试题
写好求职信第一句话的技巧
2013/10/26 职场文书
公务员个人自我评价分享
2013/11/06 职场文书
学校卫生检查制度
2014/02/03 职场文书
葬礼司仪主持词
2014/03/31 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
好好学习保证书
2015/02/26 职场文书
二年级数学教学反思
2016/02/16 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
Mysql中mvcc各场景理解应用
2022/08/05 MySQL