jquery 三列列表拖动排序 jquery下拉列表框

转载

mob6454cc6553fc 2023-10-01 21:59:26

文章标签 jquery 三列列表拖动排序 jQuer html 二级 jquery 文章分类 jQuery 前端开发

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

因为主要是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 三列列表拖动排序 jquery下拉列表框_二级