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

本文实例讲述了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())
            }
           }
          }
        }
      }
    })
   }
  })

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

好啦  效果图：

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

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

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实现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.jb51.net/code/HtmlJsRun运行上述代码，测试运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

赞 (0)

相关推荐

  • 在Vue项目中引入JQuery-ui插件的讲解

    安装:  npm install jquery-ui-dist -S 引入: import 'jquery-ui-dist/jquery-ui' 更改配置文件: 1.添加jquery:'jquery' resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), jquery:'jquery', } }, // 添加代码 plugins:

  • jQuery会死吗?我为什么不用vue写富文本

    一.事件背景: 我最近开源了一个个人耗时半年打造的富文本及一套适用于web后台的ui框架,在gitee上受到网友们的关注,部分网友对我采用jquery的技术栈提出了质疑.总结起来:无非是jquery已经落后,不久将死.甚至有少数网友很激进:非vue技术栈,你不应该加入我这个群,不管你做得多好.对应这个事情,首先我一般不反驳,因为我对vue,jquery有自己的应用场景度量.但是对于这种不分场景应用而盲目赶潮流的观点,我是持否定态度的. 为此我想有必要通过这篇文章,说明一下:我为什么用jquery

  • 详解jquery和vue对比

    详解jquery和vue对比

    前言:很多人说jquey和vue没有什么可比的,应该和Angular,React来比吧,我到觉得他们倒没有多大的可比性,都是基于mvvm思想设计的框架,无非就是实现的方式不一样,在不同场景下性能上会有一些差异.然而从jquery到vue或者说是到mvvm的转变则是一个思想想的转变,是将原有的直接操作dom的思想转变到操作数据上去,难道不是一个根本性的改变吗? 1.jquery介绍:想必大家都用过jquery吧,这个曾经也是现在依然最流行的web前端js库,可是现在无论是国内还是国外他的使用率正在

  • vue轻量级框架无法获取到vue对象解决方法

    使用vue框架,jar包都已经导入进去了,可是还是不能运行,提示vue未定义 控制台报错:vue is not defined 报错原因:如图vue2 解决方法:如图vue3.将js文件引入到body中 或者是直接在body中写js代码如图vue4 问题解决:如图vue5

  • 使vue实现jQuery调用的两种方法

    引言 如果说vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞.MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作.而vue的渐进式开发(逐步引用组件,按需引入),也让许多新手前端开发人员逐步绕过对jQuery的学习.jQuery需要记忆的内容颇多,这也让jQuery变得不那么受新入行开发者喜欢. 在前端工程化的需求没有普及的时候,许多公司使用的是后端渲染技术,为了能够实现友好的前端交互效果,需要写好大量的jQuery.JavaScript和CSS,

  • 在vue项目中使用Jquery-contextmenu插件的步骤讲解

    在vue项目中使用Jquery-contextmenu插件的步骤讲解

    使用步骤: 1.安装: npm i jquery-contextmenu --save-dev 2.在main.js文件中引包 import Jquery_contextmenu from 'jquery-contextmenu' Vue.use(Jquery_contextmenu) import 'jquery-contextmenu/dist/jquery.contextMenu.css' 注意: 在引入样式时可以点击进去jquery-contextmenu的安装目录中查找对应的css文件

  • Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项,网上有很多方法法,这里不重复写了.直接上 Vue CLI3.0 配置步骤. 第一步:安装 jQuery. Bootstrap.popper.js依赖. 其中popper.js 用于在 Bootstrap 中显示弹窗.提示.下拉菜单,所以需要引入. npm insta

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

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

    本文实例讲述了jQuery+vue.js实现的多选下拉列表功能.分享给大家供大家参考,具体如下: 其实就是实现一个多选下拉列表,然后将选中的选项显示到相应的位置: 因为主要是jQuery选中行为的实现,所以,样式结构就不多说啦,直接贴代码啦: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo

  • jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】

    本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*#piclist { width: 600p

  • vue.js实现的全选与全不选功能示例【基于elementui】

    本文实例讲述了vue.js实现的全选与全不选功能.分享给大家供大家参考,具体如下: elementui是有checkbox组件,不过问题在于checkbox组件内只能嵌套简单的字符串,如果要嵌入标签怎么办? 首先渲染页面: <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <tbody v-for="item in o

  • jquery.cookie.js实现用户登录保存密码功能的方法

    本文实例讲述了jquery.cookie.js实现用户登录保存密码功能的方法.分享给大家供大家参考,具体如下: 需要导入的js有jquery.js和jquery.cookie.js <script type="text/javascript" src=" jquery-1.5.2.js"></script> <script type="text/javascript" src="jquery.cookie.

  • vue.js前端网页弹框异步行为示例分析

    目录 1. 序 2. 找两个弹框组件看看 3. 自己肝一个 3.1. 封装 Promise 3.2. 确定时允许异步等待 3.3. 细节完善 3.4. 改革 1. 序 网页弹框是个很常见的功能,比如需要告知用户消息的时候 (Alert),需要用户进行确认的时候 (Confirm),需要用户补充一点信息的时候 (Prompt) -- 甚至可以弹框让用户填写表单 (Modal Dialog). 弹框之后,开发者需要知道这个弹框是什么时候关闭以便进行接下来的操作. 在比较古老的 UI 组件中,这个事情

  • Vue.js仿微信聊天窗口展示组件功能

    Vue.js仿微信聊天窗口展示组件功能

    源码:https://github.com/doterlin/vue-wxChat 演示地址:https://doterlin.github.io/vue-wxChat/ 运行 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 介绍 支持文本和图片的展示(后续将

  • vue项目实现记住密码到cookie功能示例(附源码)

    vue项目实现记住密码到cookie功能示例(附源码)

    本文介绍了vue项目实现记住密码到cookie功能示例,分享给大家,具体如下: 登陆页面 实现功能: 1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内 2.不勾选,点登陆时候则清空之前保存到cookie的值,下次登陆需要手动输入 大体思路就是通过存/取/删cookie实现的:每次进入登录页,先去读取cookie,如果浏览器的cookie中有账号信息,就自动填充到登录框中,存cookie是在登录成功之后,判断当前用户是否勾选了记住密码,如果勾选了,则把账号信息存

  • vue移动端写的拖拽功能示例代码

    相关知识点 touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发 mousedown mousemove mouseup对应的是PC端的事件 touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发 touchcancel.一般会在touchcancel时暂停游戏.存档等操作. 效果图 实现步骤html 总结了一下评论,好像发现大家都碰到了滑动的问题.就在

  • 利用Vue.js指令实现全选功能

    因为刚开始接触vue不久,全选的实现参考了知乎上的实现方法: 1.从服务器拿到数据,为每个item设置checked属性 2.计算选中的数量selectCount,如果选中的数量与selectItems的数量相等,则全选selectAll选中 3.点全选时,将每个item的checked属性置为true,反选时置为false, 4.每次selectItems的属性发生变化时,都将checked的为true的item放入数组checkedGroups中 下面为实现代码: //全选 data: fu

  • jQuery插件zTree实现的多选树效果示例

    jQuery插件zTree实现的多选树效果示例

    本文实例讲述了jQuery插件zTree实现的多选树效果.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <title>多选树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="styleshee

随机推荐