下拉多选_下拉多选控件 - CSDN
精华内容
参与话题
  • 使用下拉列表框进行多选

    千次阅读 2018-12-07 19:19:42
    使用下拉列表框进行多选 下拉列表也可以进行多选操作,在< select >标签中设置multiple="multiple"属性,就可以实现多选功能,在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击...

    使用下拉列表框进行多选

    下拉列表也可以进行多选操作,在< select >标签中设置multiple="multiple"属性,就可以实现多选功能,在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。
    在这里插入图片描述

               语法:<select multiple="multiple">
    

    使用提交按钮,提交数据

    在表单中有两种按钮可以使用,分别为:提交按钮、重置。这一小节讲解提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮。

         语法: <input   type="submit"   value="提交">
    

    type:只有当type值设置为submit时,按钮才有提交作用
    value:按钮上显示的文字
    举例如下:
    在这里插入图片描述
    在这里插入图片描述

    加油!

    展开全文
  • 带多选框的下拉列表

    万次阅读 2018-08-01 12:41:56
    之前想写一个带多选框的下拉列表,然后找相关的内容,发现大多都是用select写的,这种是默认的下拉列表样式,但有时候需要自己来写样式,这样用select就不合适了。 然后我就在csdn中无意间发现了一位博主...

    之前想写一个带多选框的下拉列表,然后找相关的内容,发现大多都是用select写的,这种是默认的下拉列表样式,但有时候需要自己来写样式,这样用select就不合适了。

    然后我就在csdn中无意间发现了一位博主(codingNoob,在此声明一下,他写了很多文章都不错,我还关注了!)是用li写的,只是没有多选框,然后我就用了一些他的代码,在加上自己的代码。

    <!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">
        <style>
            body{padding:30px;font-family: "微软雅黑";}
            li{list-style: none;}
            *{padding:0;margin:0;}
            #selector{
            	position:relative;
            	height:30px;
            	width:510px;
            	margin-left: 100px;
            	margin-top: 100px;
            	font-size:13px;
            	line-height:30px;
            	text-align:left;        			
            	user-select:none;
            }
            #selector select{display:none;} 
            #selector .arrow{
            	position:absolute;right:5px;top:12px;display:block;height:0;width:0;
            	border-top:8px solid lightgreen;border-right:5px solid transparent;
            	border-left:5px solid transparent;
            }
            #selector .mr-selector{
            	display:block;height:30px;width:500px;
            	padding-left:10px;border:1px solid lightgreen;
            	cursor:default;
            	overflow: hidden;
            }
            #selector .select{display:none;width:510px;margin-top:-1px;border:1px solid lightgreen;}
            #selector .select li{height:30px;line-height:30px;padding-left:10px;}
        </style>
        <link rel="stylesheet" href="xuankuang/iconfont.css" />
        <link rel="stylesheet" href="xuankuang/demo.css" />
        <script src="js/jquery-1.11.0.min.js"></script>
        <title>带多选框的下拉列表</title>
    </head>
    <body>
        <div id="selector">
            <span class="mr-selector">请选择选项</span>
            <span class="arrow"></span>
            <ul class="select">
                <li><i id="ki1" class="icon iconfont icon-duoxuankuang">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>请选择选项</li>
                <li><i class="icon iconfont icon-duoxuankuang">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>选项内容一</li>
                <li><i class="icon iconfont icon-duoxuankuang">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>选项内容二</li>
                <li><i class="icon iconfont icon-duoxuankuang">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>选项内容三</li>
                <li><i class="icon iconfont icon-duoxuankuang">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>选项内容四</li>
            </ul>
        </div>
        <script>
            (function(){
                var selector = $("#selector");
                var select = $("#selector .select");  //模拟select的ul选项
                var mrSelector = $("#selector .mr-selector");
                var li = $("#selector .select li"); //li选项
               
                selector.click(function(eve){
                    eve.stopPropagation();   //阻止冒泡避免点击后消失    
                });
                mrSelector.click(function(){
                    select.toggle();
                });
                li.click(function(eve){
                	var ttt = $(mrSelector).text();
                    var index = $(this).index();               
                    eee = $(this).find('i').attr("class");
                    if(eee=="icon iconfont icon-duoxuankuang"){
                    	$(this).find('i').attr("class","icon iconfont icon-duoxuankuang2");
                    	if(index==0){
                    		var text = $(this).text();  
                    		mrSelector.text(ttt);      
    	                }else if(index!=0){
    	                	var text = ttt+$(this).text();  
    	                	mrSelector.text(text);      
    	                }
                    }else if(eee=="icon iconfont icon-duoxuankuang2"){
                    	$(this).find('i').attr("class","icon iconfont icon-duoxuankuang");
                    }
                });
                
                $("body").click(function(){
                    select.hide();
                });
            }());
        </script>
    </body>
    </html>
    

    1、首先是下拉列表的样式:

    2、然后我自己添加了多选框,可以点击选中,这个多选框是用了阿里巴巴矢量图库的图标,这个不错,有很多矢量图,可以选择然后加入购物车生成代码,很方便!

    3、还有点击就会在上面的框里显示选中的一项的内容。但是这个有一个bug,就是选择取消的时候不能删除相应的文字。这个我暂时还没做出来,有哪位大神知道这个怎么做啊!

    展开全文
  • 类select下拉多选+搜索

    千次阅读 2019-02-22 15:09:56
    最近做项目需要实现一个可以多选、搜索的、可下拉的select功能,类似下图,我在项目里试过的插件有bootstrap-select、chosen、select2 由于项目框架的限制我放弃了bootstrap-select,由于我们也使用了bootstrap,...

    最近做项目需要实现一个可以多选、搜索的、可下拉的select功能,类似下图,我在项目里试过的插件有bootstrap-select、chosen、select2
    在这里插入图片描述

    • 由于项目框架的限制我放弃了bootstrap-select,由于我们也使用了bootstrap,插件里面的bootstrap版本(3.0)和我们用的版本不同,加上之前的前端把bootstrap.css改了好多,修改兼容难度比较大,就放弃了这个,这个界面是三个里面最舒服的。
      在这里插入图片描述
      基础用法我也附上一些供大家参考:
    	<select class="form-control col-md-2 selectpicker" multiple data-live-search="true" id="drugFromId">
    
            $("#drugFromId").selectpicker({
                noneSelectedText : '所有种类',//默认显示内容,不设置会显示英文
                noneResultsText : '未查询到',//查询不到匹配的内容显示的内容,不设置会显示英文
            });
    
            var result = $.parseJSON(data.content);
            $.each(result, function(index, item) {
                // 选中cookie中传来的值
                if (item.drugId == drugFromId) {
                    $("#drugFromId").append(
                            "<option value='" + item.drugId
                                    + "' selected='selected'>"
                                    + item.drugGeneralName + "</option>");
                } else {
                    $("#drugFromId").append(
                            "<option value='" + item.drugId + "'>"
                                    + item.drugGeneralName + "</option>");
                }
    
            });
            $('#drugFromId').selectpicker('refresh');
            $('#drugFromId').selectpicker('render');
    

    还有需要注意的一点是,如果不是引入的网上的地址链接,本地引入css、js之后记得把font文件也引进去,不然有些icon会失效。
    官网地址:http://silviomoreto.github.io/bootstrap-select/

    • chosen的问题是:什么都设置了,但就是多选死活不能搜索!!!
      单选的时候都对,一换成多选,就诸多问题:没有初始高度、没有默认初始值、无法实现搜索功能……泪目、心塞
      在这里插入图片描述
      初始状态是错的,但是一有选中值,就对了,但是搜索功能始终没有
      在这里插入图片描述
      一些基础设置为:
    引入chosen.css\chosen.js\chosen-sprite@2x.png、chosen-sprite.png
    
    <select class="form-control col-md-2" multiple data-placeholder='请选择' id="drugFromId">
    $('#drugFromId').chosen({
        no_results_text:"未查询到",
        allow_single_deselect:true,//是否允许取消选择
        search_contains:true,//模糊查询
        disable_search: false,//禁用搜索。设置为true,则无法搜索选项[单选时]。
        placeholder_text_multiple:'请选择'//多选框没有选中项时显示的占位文字
    
    });
    

    还有需要注意的一点是,要想显示出默认文字,select下的第一个选择项必须为空的option。
    学习地址参考:https://harvesthq.github.io/chosen/
    有位同志我感觉写的挺全的:https://blog.csdn.net/c11073138/article/details/79462156

    1、初始化

      $('select[name="drugFromSelect"]').select2({
            placeholder:"可多选",//默认值
            allowClear: true,//允许全部删除
        })
    
    

    2、取值

    $(function(){
    	//取值
    		$('select[name="drugFromSelect"]').change(function(){
                 var op=$('select[name="drugFromSelect"] option');
                 var allId="",allDrug="";
                 for(var i=0;i<op.length;i++){
                     if(op[i].selected){
                         allId+=$(op[i]).val()+",";
     					 allDrug+=$(op[i]).text()+",";
                     }
                 }
                 allId = allId.substr(0, allId.length - 1);//去掉末尾的逗号
                 allDrug = allDrug.substr(0, allDrug.length - 1);//去掉末尾的逗号   
             })
    })
    

    3、赋值
    select2把select标签画成了别的的东西,常规的select对象被jquery藏了起来,
    所以修改值的时候使用dom对象的触发器才行。

    $('select[name="drugFromSelect"]').select2();
    var arrM=['79078','80431'];  [val就是option的value]
    $('select[name="drugFromSelect"]').val(arrM).trigger('change');//多选
    $('select[name="drugFromSelect"]').val('30901').trigger('change');//单选
    

    要是设置默认显示值,就可以直接写那项的value即可,比如:

    $("#drugFromId").append("<option value='-1'>所有种类</option>");
    $('select[name="drugFromSelect"]').val('-1').trigger('change');
    

    或者清空选择项:

    $('select[name="drugFromSelect"]').val(" ").trigger('change');
    

    在这里插入图片描述
    4、这个删除的x要是觉得别扭,可以挪到后面
    在这里插入图片描述
    5、由于bootstrap版本冲突,导致选中的对勾无法正确显示,我就给注释了
    用伪元素重新写了一个√
    在这里插入图片描述

    .select2-container--default .select2-results__option[aria-selected=true] {
      background-color: #ddd;
      position: relative;
       }
       /* √ */
    .select2-container--default .select2-results__option[aria-selected=true]:before, 
    .select2-container--default .select2-results__option[aria-selected=true]:after  {
         content: '';
         pointer-events: none;
         position: absolute;
         color: #2ac845;
         border: 1px solid;
         background-color: #2ac845;
     }
    .select2-container--default .select2-results__option[aria-selected=true]:before {
        width: 3px;
        height: 1px;
        right: 11px;
        top: 50%;
        transform: skew(0deg,50deg);
    }
    .select2-container--default .select2-results__option[aria-selected=true]:after {
        width: 6px;
        height: 1px;
        right: 5px;
        top: 42%;
        transform: skew(0deg,-50deg);
    }
    
    展开全文
  • select下拉框多选,超级好用!十分强大!

    万次阅读 多人点赞 2020-07-23 10:17:46
    先说点废话:一个需求,想把select变成下拉多选,网上查找了半天,给出的方案都是自定义一个标签,或者弄个什么ul下面li进行选择,看起来就繁琐,本人只想在select上面做文章,不得已,自己写了一个,只需要在select...

         

    正文:

            先说点废话:一个需求,想把select变成下拉多选,网上查找了半天,给出的方案都是自定义一个标签,或者弄个什么ul下面li进行选择,看起来就繁琐,本人只想在select上面做文章,不得已,自己写了一个,只需要在select上加个属性即可,方便实用!

           2019.11.30之前,算是selectMultip的第一个版本,没想到用的人还不少,自然也发现了很多隐藏的bug,虽然它比较简单但大家使用时还是有些困惑,基于以上等原因,selectMultip2.0问世(哈哈),2.0做了全面的升级,不仅解决了之前发现的bug,而且新增了api,使用方法还是原来的步骤:1、引入js文件,2、在select标签上添加属性multip,然后调用方法即可(只有两步哦!)

    可以先访问一下这里哟:演示地址 (不想访问也可以往下读)

    先上图:

    这个是选中后的效果,我们用的是select标签,选中后子标签会变成蓝色,如果想取消,再点击一下即可取消

    取值,调用selectMultip.getVal("22")方法即可:

    赋值,调用selectMultip.setVal(id,data)即可,第二个参数类型可以是字符串或者数组,如图:

    具体取值、赋值、动态加载等可以看下面的说明文档哦!

    那现在就开始使用吧(只需要两步):

    首先,将下面的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;
    			}
    		}
    	})();

    其次,在你的select上面加一个multip属性,如图:

    然后,就是代码的实现:

    调用一下这个selectMultip.register();方法即可。

    这个方法是对标有multip属性的select标签进行注册渲染,这样它就具备了多选的功能!

    完成!


    下面是使用的说明文档,总共四个方法!

    说明文档
    方法名 参数 说明
    selectMultip.register() 将全局下所有具有multip属性的select标签注册成为具有多选功能的下拉选。
    selectMultip.reload(id, data,setData)

    id:select标签上的id值

    data:渲染的数据

    格式如下:[{
            value: "",
            text: "---请选择---"
        }, {
            value: 1,
            text: "薯片"
        }, {
            value: 2,
            text: "大豆油"
        }, {
            value: 3,
            text: "花生"
        }]

    setData:设置默认值,可选。具体格式可参照selectMultip.selVal()方法的第二个参数

    重新渲染,使用于联动或者动态渲染select标签的场景,从后台服务器获得数据之后可调用此方法。

    selectMultip.setVal(id, data)

    id:select标签上的id值

    data: 可以为字符串,如:“1,2,3”或者“a,b,c”

     也可以为数组,如[1,2,3]或者["a","b","c"]

    给标签赋值
    selectMultip.getVal(id) id:select标签上的id值 取值

                


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

    需要动态加载的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);
    
        },
       
    })

     


    标签属性说明:

    multip:select标签上的属性,用来标识此标签为下拉多选

    tip:select标签上的属性,用来提示用户为多选框如图:

    choose:设置默认选中项,在option标签上添加此属性即可。注意:此属性可能在ie8以下版本不支持(没有亲自测试)


    2019.11.30更新日志:对版本进行全面升级,并且增加动态数据渲染功能,取值/赋值/设置默认值 将更加简单方便,适用于联动等场景,并且修复隐藏bug,代码更加健壮。可以将此称之为selectMultip小框架。

    2019.11.24更新日志:解决取值个数不符问题(对之前使用的小伙伴说声抱歉,在用户多次选择取消之后会出现取值不正确的问题,感谢丶奈何亦是泪提出疑问,本人在仔细测试后才发现确实有此bug,第一时间做了更新,文本中的代码是最新代码,大家可以放心使用)

    2019.11.15更新日志:添加属性choose(默认选中),并添加注释方便使用者二次开发。

    如果还有其他需求等,可以留言,好做更新升级哦!其他不足之处,请多指教!

    展开全文
  • select下拉框实现多选功能

    万次阅读 2018-11-05 15:55:27
    &lt;select id="all"&gt; &lt;option&gt;牡丹&lt;/option&gt; &lt;option&gt;向日葵&lt;/option&gt; &lt;option&gt;薰衣草&.../op
  • bootstrap下拉列表多选组件

    万次阅读 多人点赞 2017-09-30 16:04:08
    阅读目录 一、组件开源地址以及API说明二、组件效果示例三、使用示例 1、基础示例2、其他效果示例3、组件取值赋值4、组件其他用法5、组件封装 四、源码下载五、总结 ...前言:之前分享过两篇bootstrap下拉框的...
  • Jquery下拉多选

    2020-07-30 23:31:44
    NULL 博文链接:https://fengxiaokai.iteye.com/blog/1166850
  • select 下拉多选

    千次阅读 2019-06-17 15:51:11
    一、使用multiple-select.js和multiple-select.css实现 HTML代码: <select id='checkedLevel' style="width:120px;height:28px;" multiple="multiple"> <option value="1">... &l...
  • 1 2 3 4 5 只要加上 multiple 参数即可实现多选。做个记录。
  • HTML下拉框多选

    万次阅读 2016-02-26 11:44:25
    HTML下拉框多选<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="C
  • rt 这个问题憋了我一天啦 求教啊 单选做出来了 但是不知道多选的怎么做啊 ,哪位大神来教教啊
  • layui 下拉多选

    千次阅读 2019-02-19 16:40:12
    https://hnzzmsf.github.io/example/example_v4.html#download
  • 使用VBA实现Excel下拉多选

    万次阅读 2019-02-13 18:31:06
    Excel的下拉多选 新项目需要excel导入时的下拉多选框 Excel表格下拉单选很简单,先给表格做成单选。参照 Excel要想做成多选首先需要启用宏,如果Excel中没有宏,需要下载 下载安装 安装完之后重启Excel。 点击宏,...
  • finereport 下拉复选框多选

    千次阅读 2019-01-10 22:29:58
  • 【Html】使用下拉列表框进行多选

    千次阅读 2015-12-06 14:50:21
    下拉列表也可以进行多选操作,在标签中设置multiple="multiple"属性,就可以实现多选功能,在 widows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。如下...
  • EXCEL下拉框设置多选

    万次阅读 热门讨论 2019-09-04 11:00:46
    我这里是微软office的版本,其它版本大同小异: 1、数据校验入口 2、设置数据 3、sheet页右击查看代码 4、复制下面代码进去: ...'让数据有效性选择 可以多选,重复选 Dim rngDV As Range Dim oldV...
  • Angular实现下拉菜单多选 写这篇文章时,引用文章地址如下: http://ngmodules.org/modules/angularjs-dropdown-multiselect http://dotansimha.github.io/angularjs-dropdown-multiselect/#/ ...
  • Android自定义单选多选下拉列表

    千次阅读 2017-07-29 13:01:22
    发疯的产品要做一个可以单选和多选下拉列表,陪你玩玩吧。直接上效果。实现方案:我的思路是自定义一个类继承PopupWindow,里面的选项采用Listview,再结合一些动画来实现。核心代码。
  • layui下拉多选

    千次阅读 2019-04-10 17:19:40
    1.去layui下载多选插件 ![](https://img-blog.csdnimg.cn/20190410171803776.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWxteWJhYnk=,size_16,...
  • 最近在做一个项目,项目的后端是地址:https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用...在项目中使用的是 element ui 组件
1 2 3 4 5 ... 20
收藏数 21,578
精华内容 8,631
关键字:

下拉多选