精华内容
下载资源
问答
  • 下拉多选
    2019-11-03 03:12:42

    本人第一次写博客,记录一下自己学习的东西,同时希望可以帮助的一同前进的你

    由于开发中看到很多大神自己写各种js的插件很是羡慕,于是也萌生了自己写js插件的想法,下面是我花两天写的一个下拉多选的js插件,功能很简单,写的不是很好(大神看到多多指教),下面我简单说下

    一,插件属性的配置,options是对外暴露的参数,将一些需要提供给用户的参数封装为一个JSON对象,defaults中可以设置一些默认值

    ;(function($){
    $.fn.multselect=function(options){//插件名称
            var defaults={
               width:"330px",//div宽  必须是像素值
               panelHeight:"150px",//下拉画布高  auto
               //color:"red",//li标签颜色
               searchBar:false,
               onSelect:function(el){//选中回调函数
                
               },
               onEcho:[]//做回显  data格式[1,2,3,4,5]  select中的value
    
            }

    二,$.extend方法可以将用户传过来的参数和默认参数合并

    var options=$.extend(defaults,options);

    三,插件的具体实现,开发中通常会将一些公共 的方法封装到到一起,利于维护代码解耦,代码不难理解,自己研究一下,最下面会有代码的链接地址

    return this.each(function(){
              var uid="ui"+new Date().getTime();//控件ID
              var body=$("body"),jqObj;
              var _this=$(this);
    		  var position=_this.offset();
               var originObj={//获取select内容
                  name:_this.attr("name"),//name属性
                  getOptions:function(){//获取options 值 value
                       var obj=[];//获取value ,值
                       _this.find("option").each(function(){
                       	 var value=this.value;
                       	 var html=this.innerHTML;
                       	 var o={};
                         o[value]=html;
                         obj.push(o);
                       })
                       return obj;
                  }
    		  };
    		  var box_html="<div id='"+uid+"' class='multselect'><i class='icon-right'></i><div class='kid'><div class='mult-query'><input type='text' class='data-query'><b class='icon_query'></b></input></div><div class='mult-list'><ul></ul></div></div></div>",
    		      content_html="<span></span>",
    		      submit_input="<input class='submit_input' name='' style='display:none;' value=''></input>";		 
              var multselect={
                  init:function(){//页面初始化控价
    	                 _this.css({opacity:0});//select隐藏
    	                 _this.after(box_html);
    	                 jqObj=$("#"+uid);                    
                         this.changeCSS(jqObj);
    	                 /*获取ul中的li的集合*/
    	                 var optionshtml="";
    	                 var arr=[];//存储select中的value值 
    	                 var _origin=originObj.getOptions();
    	                 for(var i=0;i<_origin.length;i++){
    	                    var $key,$value;
    	                 	for(var key in _origin[i]){
    	                       $key=key;
    	                       $value=_origin[i][key];
    	                 	}
    	                 	arr.push($key);
    	                 	optionshtml+='<li data-id="'+$key+'">'+$value+'</li>';
    	                 }
    	                jqObj=multselect.setKidDiv_Zindex(jqObj);
    	                 /*加载span input*/
    	                 jqObj.append(content_html).append(submit_input);;
    	                
    	                 jqObj.find(".kid ul").append(optionshtml);//加载li集合
    
    	                 //回显
    	                 var data=options.onEcho;
    	                 if(data&&$.isArray(data)){
    	                 	 var text="";
                             for(var i=0;i<data.length;i++){
                             	 if($.inArray(data[i],arr)=="-1"){//判断select value集合有无
                                      break;
                                  }
                                  var $li=jqObj.find("li[data-id='"+data[i]+"']");
                                  $li.addClass("select");
                                  text+=text==""?$li.html():","+$li.html();
                             }
                             jqObj.find("span").html(text);
                             jqObj.find(".submit_input").val(data.join());
    	                 }
    
    	                 this.setEvents();//初始化事件集
    	                 },
                  setEvents:function(){
                  	     var event=this;
    	                //鼠标单击加载active样式
    	                 jqObj.delegate("li","click",function(){
    	                 	var text=$(this).get(0).innerHTML;
    	                    var id=$(this).data("id");
    	                    if($(this).is(".select")){    
                                event.removeContentOptions($(this),id);
    	                    }else{
    	                    	event.addContentOptions($(this),text,id); 	
    	                    }
    	                    return false;
    	                 });
    	                 //单击展开下拉
    	                 jqObj.bind("click",function(){
    	                 	var kidBox=$(this).find(".kid");
    	                 	if(kidBox.is(":hidden")){
    	                 		kidBox.show();
    	                 		$(this).addClass("mult-b");
    	                 		$(this).find("i").removeClass().addClass("icon-bottom");  
    	                 	}else{
    	                 		kidBox.hide();
    	                 		$(this).removeClass("mult-b");
    	                 		$(this).find("i").removeClass().addClass("icon-right");  
    	                 	}
    	                 }),
    	                 //鼠标移入移出
    	                 jqObj.delegate("li","mouseover",function(){
    	                 	$(this).addClass("active");
    	                 }),
    	                 jqObj.delegate("li","mouseleave",function(){
    	                 	$(this).removeClass("active");
    	                 })
    	                 //点击控件外进行收起控件  
    	                 //$(document).click(function(event){
                           // body.find(".kid").hide();
                            //jqObj.removeClass("mult-b");
    	                    //jqObj.find("i").removeClass().addClass("icon-right"); 
    	                 //});
    	                 //jqObj.click(function(event){
                           // event.stopPropagation();
    	                 //});
                  },
                  //修改样式
                  changeCSS:function(obj){
                         jqObj.css({
                         	"position":"absolute",
                         	"width":options.width,
                         	"top":position.top+"px",
                         	"left":position.left+"px",
                         	"z-index":0});
    
                         if(options.searchBar==true){//显示搜索
                         	var kid_h=jqObj.find(".kid").height();
                            var panel_h=options.panelHeight.substr(0,options.panelHeight.length-2); 
                            var height=(options.searchBar==true?Number(panel_h)-Number(kid_h)+"px":options.panelHeight);
                            jqObj.find(".mult-list").css({"height":height});
                         }else{
                         	 //隐藏搜索
                            jqObj.find(".mult-query").hide();
                         };
                         
                         var kidCSSObj={
                        	"display":"none",
                         	"width":options.width,
                         	"height":options.panelHeight
                            }
                         jqObj.find(".kid").css(kidCSSObj);
                  },
                  //删除li 以及 span中内容
                  removeContentOptions:function(obj,id){
                            obj.removeClass("select");
    	                    jqObj.find("span").html(multselect.getContent());
    	                 
    	                    //设置input中value
    	                    var val="";
    	                    jqObj.find("li[class='select']").each(function(index,el){
                                var _id=$(el).data("id");
                                val+=val==""?_id:","+_id;
    	                    })
    	                    jqObj.find(".submit_input").val(val);
                  },
                  //添加li 以及 span中内容
                  addContentOptions:function(obj,text,id){
                           obj.addClass("select");
    	                   jqObj.find("span").html(multselect.getContent());
    	                   //设置input中value
    	                    var val="";
    	                    jqObj.find("li[class='select']").each(function(index,el){//选中第一个  input值没有???
                                var _id=$(el).data("id");
                                val+=val==""?_id:","+_id;
    	                    })
    	                    jqObj.find(".submit_input").val(val);
    	                    _this.find("option[value='"+id+"']").attr("selected","selected");
    	                    //回调函数
    	                    options.onSelect(_this);
                  },
                  //刷新页面显示内容
                  getContent:function(){
                  	       var content="";
                           jqObj.find("li").each(function(){
                              if ($(this).hasClass("select")) {
                                content+=content==""?$(this).html():","+$(this).html();
                              }
                           });
                           return content;
                  },
    
    			  //解决两个下拉框重叠显示问题
    			  setKidDiv_Zindex:function(jqObj){
    			  	       var length=body.find(".multselect").length;
    			  	       if(typeof length=='number'){
    			  	       	   jqObj.css("z-index",$(document).height()-position.top);//通过高度加载 越高 值越大
    			  	       }
    			  	       return jqObj;
    			  }
              };
    
              multselect.init();
            })
    	}
    })(jQuery);

    四,调用的时候需要引入Jquery,以及依赖的CSS

    <!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" />
    <title>自定义下拉多</title>
    <link rel="stylesheet" href="css/multselect.css" type="text/css"></link>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="script/jquery-multselect-1.0.js"></script>
    </head>
    
    <body>
    <p>自定义下拉多选</p>
            <select name="name" class="multselect sel2">
                <option value="1">选项A</option>
                <option value="2">选项B</option>
                <option value="3">选项C</option>
                <option value="4">选项D</option>
                <option value="5">选项E</option>
                <option value="6">选项F</option>
                <option value="7">选项G</option>
                <option value="8">选项H</option>
                <option value="9">选项I</option>
                <option value="10">选项G</option>
                <option value="11">选项H</option>
           </select>
     
        
    <form>
    <script>
    $(function(){
      $(".sel2").multselect({
    	   width:"300px",
    	   panelHeight:"200px",
    	   onSelect:function(el){
    		  alert(el.find("option:selected").html()+",我被选中了");
    	   },
    	   onEcho:["2","3","4"]//回显用
       });
      
    });
    </script>
    </body>
    </html>
    

    以上就是下拉插件的基本实现

    更多相关内容
  • 自定义的WinForm窗体的下拉框中可以多选
  • 主要介绍了Element ui 下拉多选时 新增一个选择所有的选项,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • web前端插件+下拉多选复选框,可用于后台多选数据,前端也可以使用,插件可以二开也可以
  • 多选下拉框sumoselect,兼容IE8。简单易用,引用方便,占用体积小。 多选下拉框sumoselect,兼容IE8。简单易用,引用方便,占用体积小。
  • c#winform下拉多选自定义控件(带全选),可以自己定义选择项的下拉框
  • echat是一套原生视觉体验基础样式库,由设计...件、文本链接、链接组件、图片组件、图标、进度条、按钮、单行文本、多行文本、单选列表、多选列表、开关选择、滑动条、上传组件、时间、下拉列表、单选列表等各式元素。
  • Jquery下拉多选

    2019-03-26 02:05:20
    jquery_下拉多选.rar,jquery 下拉多选,jquery.js,demo - 1.html
  • excel下拉多选实例

    2017-02-20 10:51:16
    excel VB 实现下拉多选功能
  • Layui的下拉多选

    2021-11-20 16:24:12
    layui.config({ base: '__PUBLIC__/layuiadmin/' //静态资源所在... xmSelect: 'xm-select'// 这个是下拉多选 }).use(['index', 'set', 'form', 'laydate', 'upload', 'layarea', 'laydate', 'xmSelect'], functio
    layui.config({
            base: '__PUBLIC__/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index', //主入口模块
            xmSelect: 'xm-select'// 这个是下拉多选
        }).use(['index', 'set', 'form', 'laydate', 'upload', 'layarea', 'laydate', 'xmSelect'], function () {
            var $ = layui.$
                , laydate = layui.laydate
                , form = layui.form
                , layarea = layui.layarea
                , laydate = layui.laydate
                , xmSelect = layui.xmSelect
                , upload = layui.upload;
    
            // 街道赋值
            var steetList = '{$streetJson}';
            var street_activity_area = '{$street_activity_area}';
            var street_c_activity_area = '{$street_c_activity_area}';
            var streetData = [];
            $.each(JSON.parse(steetList), function (k, v) {
                streetData.push(v)
            })
            var streetXmlsel = xmSelect.render({
                el: '#street',
                data: streetData,
                clickClose: true,
                autoRow: true,
                theme: {
                    color: '#f4817c',
                    // hover: '#dd575c',
                    maxColor: '#f4817c'
                },
                // 监听事件
                on: function (data) {
                    var arr = data.arr;
                    if (arr.length > 0) {
                        var s_id = '';
                        var s_id1 = '';
                        for (let i = 0; i < arr.length; i++) {
                            if ((arr.length - i) == 1) {
                                s_id1 += arr[i]['value'];
                                s_id += arr[i]['province_id']+'_'+arr[i]['province_cn']+'_'+arr[i]['city_id']+'_'+arr[i]['city_cn']+'_'+arr[i]['region_id']+'_'+arr[i]['region_cn']+'_'+arr[i]['value']+'_'+arr[i]['name'];
                            } else {
                                s_id1 += arr[i]['value'] + "-";
                                s_id += arr[i]['province_id']+'_'+arr[i]['province_cn']+'_'+arr[i]['city_id']+'_'+arr[i]['city_cn']+'_'+arr[i]['region_id']+'_'+arr[i]['region_cn']+'_'+arr[i]['value']+'_'+arr[i]['name'] + "-";
                            }
    
                        }
                        $('input[name=street]').val(s_id)
                        $.post('__MODULE__/Room/getStreetC2', {s_id:s_id1}, function (data) {
                            var street_communityXmlsel = xmSelect.render({
                                el: '#street_community',
                                data: data,
                                autoRow: true,
                                theme: {
                                    color: '#f4817c',
                                    // hover: '#dd575c',
                                    maxColor: '#f4817c'
                                },
                                on: function (data1) {
                                    var arr = data1.arr;
                                    if (arr.length > 0) {
                                        var s_id = '';
                                        for (let i = 0; i < arr.length; i++) {
                                            if ((arr.length - i) == 1) {
                                                s_id += arr[i]['province_id']+'_'+arr[i]['province_cn']+'_'+arr[i]['city_id']+'_'+arr[i]['city_cn']+'_'+arr[i]['region_id']+'_'+arr[i]['region_cn']+'_'+arr[i]['street_id']+'_'+arr[i]['street_cn']+'_'+arr[i]['value']+'_'+arr[i]['name'];
                                            } else {
                                                s_id += arr[i]['province_id']+'_'+arr[i]['province_cn']+'_'+arr[i]['city_id']+'_'+arr[i]['city_cn']+'_'+arr[i]['region_id']+'_'+arr[i]['region_cn']+'_'+arr[i]['street_id']+'_'+arr[i]['street_cn']+'_'+arr[i]['value']+'_'+arr[i]['name'] + "-";
                                            }
    
                                        }
                                        $('input[name=street_community]').val(s_id)
                                    }
                                }
                            })
                            street_communityXmlsel.setValue(JSON.parse(street_c_activity_area),null,true)
                        },'json');
                    } else {
                        xmSelect.render({
                            el: '#street_community',
                            data: [],
                            theme: {
                                color: '#dd575c',
                                // hover: '#dd575c',
                                maxColor: '#dd575c'
                            }
                        })
                    }
                }
            })
    
    		//这个是回显数据
            streetXmlsel.setValue(JSON.parse(street_activity_area),null,true) 
        });
    

    Xmlsel文档地址

    展开全文
  • Select下拉多选

    2020-09-30 11:13:58
    //大致思路是:为下拉选创建一个隐藏的子选项,每次单选之后将单选的值追加到隐藏的子选项中,并将子选项选中显示即可 //全局查找所有标记multip的select document.querySelectorAll("[multip]").forEac

    首先,将下面的js代码复制到一个js文件中(js文件名可以命名为selectMultip哦),并将其引入项目中即可

    (function() {
    		selectMultip = {
    			register: function(id) {
    				//大致思路是:为下拉选创建一个隐藏的子选项,每次单选之后将单选的值追加到隐藏的子选项中,并将子选项选中显示即可
    				//全局查找所有标记multip的select
    				document.querySelectorAll("[multip]").forEach(function(e) {
    					render(e);
    				})
    			},
    			reload: function(id, data, setData) {
    				var htm = "";
    				for(var i = 0; i < data.length; i++) {
    					htm += '<option value="' + data[i].value + '">' + data[i].text + '</option>'
    				}
    				var e = document.getElementById(id);
    				e.innerHTML = htm;
    				render(e);
    				this.setVal(id, setData);
    			},
    			setVal: function(id, str) {
    				var type = Object.prototype.toString.call(str);
    				switch(type) {
    					case "[object String]":
    						document.getElementById(id).val = str;
    						break;
    					case "[object Array]":
    						document.getElementById(id).val = str.toString();
    						break;
    					default:
    						break;
    				}
    			},
    			getVal: function(id) {
    				return document.getElementById(id).val;
    			},
     
    		}
     
    		function render(e) {
    			e.param = {
    				arr: [],
    				valarr: [],
    				opts: []
    			};
    			var choosevalue = "",
    				op;
     
    			for(var i = 0; i < e.length; i++) {
    				op = e.item(i);
    				e.param.opts.push(op);
    				if(op.hasAttribute("choose")) {
    					if(choosevalue == "") {
    						choosevalue = op.value
    					} else {
    						choosevalue += "," + op.value;
    					}
     
    				}
    			}
     
    			//创建一个隐藏的option标签用来存储多选的值,其中的值为一个数组
    			var option = document.createElement("option");
    			option.hidden = true;
    			e.appendChild(option);
    			e.removeEventListener("input", selchange);
    			e.addEventListener("input", selchange);
     
    			//重新定义标签基础属性的get和set方法,实现取值和赋值的功能
    			Object.defineProperty(e, "val", {
    				get: function() {
    					return this.querySelector("[hidden]").value;
    				},
    				set: function(value) {
    					e.param.valarr = [];
    					var valrealarr = value == "" ? [] : value.split(",");
    					e.param.arr = [];
    					e.param.opts.filter(function(o) {
    						o.style = "";
    					});
    					if(valrealarr.toString()) {
    						for(var i = 0; i < valrealarr.length; i++) {
    							e.param.opts.filter(function(o) {
    								if(o.value == valrealarr[i]) {
    									o.style = "color: blue;";
    									e.param.arr.push(o.text);
    									e.param.valarr.push(o.value)
    								}
    							});
    						}
    						this.options[e.length - 1].text = e.param.arr.toString();
    						this.options[e.length - 1].value = e.param.valarr.toString();
    						this.options[e.length - 1].selected = true;
    					} else {
    						this.options[0].selected = true;
    					}
     
    				},
    				configurable: true
    			})
    			//添加属性choose 此属性添加到option中用来指定默认值
    			e.val = choosevalue;
    			//添加属性tip 此属性添加到select标签上
    			if(e.hasAttribute("tip") && !e.tiped) {
    				e.tiped = true;
    				e.insertAdjacentHTML('afterend', '<i style="color: red;font-size: 12px">*可多选</i>');
    			}
    		}
     
    		function selchange() {
    			var text = this.options[this.selectedIndex].text;
    			var value = this.options[this.selectedIndex].value;
    			this.options[this.selectedIndex].style = "color: blue;";
    			var ind = this.param.arr.indexOf(text);
    			if(ind > -1) {
    				this.param.arr.splice(ind, 1);
    				this.param.valarr.splice(ind, 1);
    				this.param.opts.filter(function(o) {
    					if(o.value == value) {
    						o.style = "";
    					}
    				});
    			} else {
    				this.param.arr.push(text);
    				this.param.valarr.push(value);
    			}
    			this.options[this.length - 1].text = this.param.arr.toString();
    			this.options[this.length - 1].value = this.param.valarr.toString();
    			if(this.param.arr.length > 0) {
    				this.options[this.length - 1].selected = true;
    			} else {
    				this.options[0].selected = true;
    			}
    		}
    	})();
    

    HTML代码

    <select id="creType" multip  class="selectpicker show-tick form-control">
    </select>
    

    调用方法,冲后台获取数据,动态渲染

    //获取证件类型信息
            getCreTypes: function () {
                $.get(baseURL + "sys/dict/getTypes?type=CREDENTIAL_TYPE", function (r) {
                    var data = [];
                    for(var i = 0;i < r.types.length;i++){
                        var obj ={};
                        obj.value=r.types[i].code;
                        obj.text=r.types[i].name;
                        data.push(obj);
                    }
                    selectMultip.reload("creType", data);
                    // vm.creTypes = r.types;
                });
            },
    

    关于动态渲染说明以及示例:

    需要动态加载的select下拉选项我们往往异步请求后台拿到数据后,对下拉选进行拼接,这个繁琐的步骤已经在reload方法中做好了,我们只需要传递正确的数据就可以完成,下面举个例子,假设我们使用jquery的ajax获取后台数据:

    我们代码需要这么写:

    $.ajax({
        url: url,
        type: type ,
        data: param,
        success: function (res) {
            //data中如果是[{value: 1,text: "薯片"}]格式与字段直接传递,如果不是 特别注意  字段名要一致
           //假设我们拿到是数据是[{id: 1,name: "薯片"}]
     
             var data = []
             for(var i = 0;i < res.list.length;i++){
                var obj ={};
                obj.value=res.list[i].id;
                 obj.text=res.list[i].name;
                data.push(obj);
             }
             selectMultip.reload(id, data,setData);
        },
    })
    

    设置值:

    //参数一:标签id 	
    //参数二:设置的值,可以为字符串"1,2,3"也可以是数组[1,2,3]
    selectMultip.setVal("creType", data)
    

    取值

    //参数:标签的id
    selectMultip.getVal("creType")
    

    原文链接:https://blog.csdn.net/bokestudy/article/details/90177144

    展开全文
  • 下拉多选菜单jquery代码
  • 自己封装的继承自C# Winform中ComboBox的下拉多选控件,操作简单,效果非常好。①,可设置允许单选或多选。②,可绑定List,DataTable,Dictionary,string>类型的数据源。③,在下拉列表中可显示自定义的多列数据。...
  • 下拉多选列表

    2016-02-16 16:24:37
    自己编写的下拉多选列表。满足多选的需求。java工程压缩包。直接可以运行
  • asp.net 自定义下拉多选控件

    千次下载 热门讨论 2012-03-04 10:26:24
    自定义下拉多选控件,支持多选,基于JQuery
  • 继承自C# Winform中ComboBox的下拉多选控件,操作简单,效果非常好 1、多选。 2、可绑定List,DataTable,Dictionary类型的数据源。 3、在下拉列表中可显示自定义的多列数据。 4、可在下拉列表中通过输入关键字,...
  • Extjs下拉多选

    热门讨论 2012-07-22 22:29:24
    Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
  • jQuery + bootstrap 实现下拉多选列表

    千次阅读 2022-03-31 11:30:19
    基于 jQuery 与 Bootstrap 实现下拉多选列表


    前段时间做的页面里要有一个二级多选的下拉列表,项目用的是 jQuery 和 bootstrap,找了很多方法都要额外引入插件,但是我不想为了这个功能单独引入一个插件,决定自己基于 bootstrap 的下拉菜单组件做一个,先展示一下效果。

    在这里插入图片描述

    基本思路

    主要是基于 bootstrap 提供的下拉菜单组件,嵌套一个子菜单,并结合复选框实现了二级多选功能。二级选择框中具体选项的相关数据都是从后端拿的,所以还会涉及到动态插入元素的处理方法,下面一步步地进行介绍。

    HTML代码

    基于 bootstrap 提供的下拉菜单组件,在下拉菜单中嵌套菜单,二级菜单的具体选项动态插入的,HTML 代码如下。

    <div class="container">
      <div class="row">
        <label class="col-xs-2 col-xs-offset-1 control-label text-center">应用列表</label>
        <div class="col-xs-6 dropdown">
          <input type="hidden" id="checkedList">
          <div id="checkedNameList" class="form-control text-center dropdown-toggle" data-toggle="dropdown"></div>
          <ul class="dropdown-menu col-xs-6" role="menu">
            <li data-index="01" class="dropdown-submenu">
              <label>社交</label>
              <ul class="dropdown-menu col-xs-11"></ul>
            </li>
            <li data-index="02" class="dropdown-submenu">
              <label>游戏</label>
              <ul class="dropdown-menu col-xs-11"></ul>
            </li>
            <li data-index="03" class="dropdown-submenu">
              <label>视频</label>
              <ul class="dropdown-menu col-xs-11"></ul>
            </li>
            <li data-index="04" class="dropdown-submenu">
              <label>购物</label>
              <ul class="dropdown-menu col-xs-11"></ul>
            </li>
            <li data-index="05" class="dropdown-submenu">
              <label>音乐</label>
              <ul class="dropdown-menu col-xs-11"></ul>
            </li>
            <li data-index="06" class="dropdown-submenu">
              <label>下载</label>
              <ul class="dropdown-menu col-xs-11"></ul>
            </li>
            <li data-index="07" class="dropdown-submenu">
              <label>网址</label>
              <ul class="dropdown-menu col-xs-11"></ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    

    CSS样式

    主要是想通过 CSS 实现以下几个效果:

    • 箭头小图标
    • 更改滚动条的样式
    • 一级菜单与二级菜单的布局
    • 鼠标悬停在一级菜单的选项上时,显示对应的二级菜单
    /* 显示所有已选择的应用名 */
    #checkedNameList {
      min-height: 34px;
      height: auto;
    }
    .dropdown-toggle::after{
      display: block;
      content: " ";
      float: right;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: 4px 4px 0 4px;
      border-top-color: #555;
      margin-top: 10px;
    }
    .dropdown-menu {
      text-align: center;
      left: 15px;
      top: auto;
      padding: 0;
    }
    /* 更改滚动条样式 */
    .dropdown-menu::-webkit-scrollbar {
      width: 4px;
      border-radius: 4px;
    }
    /* 更改滚动条的轨道样式 */
    .dropdown-menu::-webkit-scrollbar-track {
      border-radius: 4px;
    }
    /* 更改滚动条的滑块样式 */
    .dropdown-menu::-webkit-scrollbar-thumb {
      background-color: #d6d6d6;
      border-radius: 4px;
    }
    /* 菜单中的选项 */
    .dropdown-menu > li > label {
      width: 100%;
      padding: 2px 12px;
      margin: 0;
      font-weight: 400;
    }
    /* 鼠标悬停处的选项时更改背景色 */
    .dropdown-menu > li:hover {
      background-color: #ebebeb;
    }
    /* 一级菜单中的右箭头小图标 */
    .dropdown-submenu > label::after {
      display: block;
      content: " ";
      float: right;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: 4px 0 4px 4px;
      border-left-color: #ccc;
      margin-top: 4px;
    }
    .dropdown-submenu:hover > label::after {
      border-left-color: #000;
    }
    /* 二级菜单的位置 */
    .dropdown-submenu > .dropdown-menu { 
      top: -1px;
      left: 100%;
      height: 170px;
      margin: 0;
      border-left: none;
      overflow: auto;
    }
    /* 二级菜单中的多选框向右浮动 */
    .dropdown-submenu > .dropdown-menu input {
      float: right;
    }
    /* 鼠标悬停在一级菜单的选项时显示对应的二级菜单 */
    .dropdown-submenu:hover > .dropdown-menu { 
      display: block;
    }
    

    JS代码

    现在需要考虑如何将获取到的选项数据插入到页面中。

    // 假设获取到的数据如下
    var data_list = [
      {appId: "01-0001", appName: "QQ"},
      {appId: "01-0002", appName: "微信"},
      {appId: "02-0001", appName: "王者荣耀"},
      {appId: "02-0002", appName: "和平精英"},
      {appId: "03-0001", appName: "腾讯视频"},
      {appId: "03-0002", appName: "快手短视频"},
      {appId: "04-0001", appName: "淘宝"},
      {appId: "04-0002", appName: "京东"},
      {appId: "05-0001", appName: "QQ音乐"},
      {appId: "05-0002", appName: "网易云音乐"},
      {appId: "06-0001", appName: "迅雷下载"},
      {appId: "06-0002", appName: "百度网盘"},
      {appId: "07-0001", appName: "百度"},
      {appId: "07-0002", appName: "谷歌"},
    ];
    

    最基础的办法,遍历数据集,直接将每一项数据插入到二级菜单中,代码如下。

    // 动态插入二级菜单的选项
    data_list.forEach(v => {
      var category = v.appId.slice(0, 2);
      var opt = `<li data-value="${v.appId}"><label>${v.appName}<input type="checkbox"></label></li>`;
      $(`.dropdown-submenu[data-index=${category}]`).find(".dropdown-menu").append(opt);
    });
    

    但这个方法有一个缺陷,每一次遍历都会向 DOM 中插入一个新的 li 元素。我们知道,向DOM树中新增一个DOM节点会导致回流。这还只是数据比较少的情况下,但是数据量很大的话怎么办?也太消耗性能了,此时文档片段就起了很重要的作用,先把同一类的选项放到一个文档片段中,然后再一次性添加到对应的二级菜单中,因为文档片段存在于内存中,不在DOM树里,所以把子元素插入到碎片化文档的操作不会导致回流,这样能有效地减少回流次数,代码如下。

    // 对数据进行分类,并设置每个类对应的文档片段
    var app_list = data_list.reduce((now, v) => {
      var c = v.appId.slice(0, 2);
      if (!now.hasOwnProperty(c)) {
        now[c] = document.createDocumentFragment();
      }
      var opt = $(`<li data-value="${v.appId}"><label>${v.appName}<input type="checkbox"></label></li>`);
      // 往碎片化文档中添加的元素必须是DOM节点
      // jQuery生成的是jQuery对象,这是一个类数组对象,它的第一个元素就是对应的DOM节点
      now[c].appendChild(opt[0]);
      return now;
    }, {});
    // 将每个类的文档片段插入到相应的菜单中
    for (var [k, v] of Object.entries(app_list)) {
      $(`.dropdown-submenu[data-index=${k}]`).find(".dropdown-menu").append(v);
    }
    

    现在解决了动态插入的问题,看看如何实现第一次点击选中、第二次点击取消选中并显示对应的结果。因为选项是动态插入的,为了保证 input 上的事件能被触发,我们将 input 元素上的事件委托到父元素上,点击元素时,如果当前是选中状态,则将当前选项的应用名和应用ID存入,若取消选中,则将应用名和应用ID删除,代码如下。

    $(".dropdown-submenu > .dropdown-menu").on('click', 'input', function(e){
      // 当前选项的应用ID
      var nowId = $(this).parent().parent().attr("data-value");
      // 当前选项的应用名
      var nowName = $(this).parent().text();
      // 所有已选中的应用ID
      var list = !$("#checkedList").val() ? [] : $("#checkedList").val().split(" ");
      // 所有已选中的应用名
      var listName = !$("#checkedNameList").text() ? [] : $("#checkedNameList").text().split(" ");
      var index = list.indexOf(nowId);
      if ($(this).is(":checked")) {
      	// 当前选项被选中,将当前选项的应用ID和应用名存入已选中的应用ID和应用名数组中
        if (index === -1) {
          list.push(nowId);
          listName.push(nowName);
        }
      } else {
      	// 当前选项取消选中,将当前选项的应用ID和应用名从已选中的应用ID和应用名数组中删除
        if (index !== -1) {
          list.splice(index, 1);
          listName.splice(index, 1);
        }
      }
      $("#checkedList").val(list.join(" "));
      $("#checkedNameList").text(listName.join(" "));
    });
    

    bootstrap 提供的下拉菜单组件在点击了一个选项之后,下拉菜单会消失,但是现在需要能进行多选,所以这个情况需要避免。在点击时,实际上点击的是 li 的子元素,但是由于事件冒泡,点击事件会冒泡至 li 元素导致下拉菜单被隐藏。可以通过阻止事件冒泡解决这个问题,代码如下。

    // 注意最好不要直接为label元素绑定事件,因为二级菜单的选项是动态生成的。这里没有体现出来,但实际上选项的数据是异步获取的
    // 可以使用jQuery的事件代理,将事件绑定到父元素上
    $(".dropdown-menu").on('click', 'label', function(e){
    	// 阻止事件冒泡到li元素,避免出现点击一个选项后列表消失的情况
      e.stopPropagation();
    });
    
    展开全文
  • 下拉多选 原生js

    2021-09-23 14:56:39
    <!doctype html> 无标题文档 请选择分类 AAA BBB CCC DDD EEE #chlStateLi { margin: 100px auto; width: 200px; } /* chlStateLi */ ...padding-left: 5
  • DropDownCheckList下拉多选控件ASP

    热门讨论 2013-06-21 10:48:47
    ASP.NET上直接可用的DropDownCheckList下拉多选控件,已编译直接添加后可以在工具中拖选使用,非常方便快捷。 Creates a multi selection check box group which is displayed and hidden on the client through the...
  • extjs,下拉多选

    2021-03-22 10:50:38
    store: { fieldLabel: '类型', name:'search_storageWay', allowBlank:true, xtype:'combobox', bind:{ store:'{exportMethodStore}' }, displayField:'exportName', ...
  • vant下拉多选

    千次阅读 2022-01-18 09:50:11
    <template> <div class="dh-field "> <div class="van-hairline--bottom"> <van-field v-model="resultLabel" ... :is-link="$attrs.disabled === undefined" error-message.
  • 所以今天就和大家分享怎么用中继器制作多选下拉列表。该原型制作完成后,下次使用简单,只需要填写中继器表格即可。原型预览:https://qu0b4r.axshare.com/下面是多选下拉列表的效果介绍,如果想看单选或者多级下拉...
  • 原标题:Axure教程:下拉多选列表集合(多选下拉列表+单选下拉列表+分级下拉列表)之前和大家分享了 《》、《》,很多同学私信我说很好使用,希望能够做一个多选下拉列表的教程所以今天就和大家分享怎么用中继器制作...
  • js 下拉层级多选_jQuery下拉多选插件ySelect.js,可多选,单选 下载可直接使用
  • 1、HTML <el-col :span="24"> <el-form-item label="学院" prop="college"> <el-select v-model="dataForm.collegeList" multiple filterable style="width: 100%;" pl
  • asp.net下拉多选控件

    2015-07-10 10:11:39
    下拉多选控件.rar,WebSite1,web.config,styles.css,img,expandCheck.gif,expand.gif,js,DropDownCheckList.js,Scripts,jquery-1.4.1.min.js,jquery-1.4.1-vsdoc.js,jquery-1.4.1.js,Bin,DropDownCheckList.dll,...
  • 1.最近需要做一个移动端多选的功能,发现vant上没有多选下拉组件,于是决定写一个,样式如下 调用部分传入值 props select-data-opts 传入list数据, disabled 下拉是否可用 checkedList 默认选中数据 selectName...
  • JS文本框下拉多选值的方法

    千次阅读 2022-04-25 13:21:52
    第一种: <!DOCTYPE html> <html> <head> <meta ...JS复选框向一个文本框中传值的多选效果</title> <style type="text/css"> input { margin.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,477
精华内容 12,190
关键字:

下拉多选

友情链接: desktopimage.rar