首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery实现电梯导航模块
Dec 22 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
PL990(2) BCL3000(2) ICF-SW07(1) PL450(1) ICF-SW7600(1) H-501(1) S500(1) S700(1) S400(1) 低放电路(1)
You might like
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
PHP print类函数使用总结
2010/06/25 PHP
php模板中出现空行解决方法
2011/03/08 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
thinkphp微信开发（消息加密解密）
2015/12/02 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
vue2项目使用sass的示例代码
2017/06/28 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）
2019/09/05 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
Python字节单位转换实例
2019/12/05 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
HTML5边玩边学（3）像素和颜色
2010/09/21 HTML / CSS
请说出几个常用的异常类
2013/01/08 面试题
毕业生自我鉴定
2013/12/04 职场文书
公司业务主管岗位职责
2013/12/07 职场文书
员工生日活动方案
2014/08/24 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技