精华内容
下载资源
问答
  • 下拉多选

    2016-12-09 15:27:07
    在应用的输入界面中,下拉框是最常见的了,下拉选择框可以简化用户的输入,可以避免用户的错误录入,还可以轻松实现中文与代码的映射关系,可谓用途多多。 可是随着业务的越来越复杂,各种奇怪的需求均可能冒出来,...
    

    一、任务背景

    在应用的输入界面中,下拉框是最常见的了,下拉选择框可以简化用户的输入,可以避免用户的错误录入,还可以轻松实现中文与代码的映射关系,可谓用途多多。

    可是随着业务的越来越复杂,各种奇怪的需求均可能冒出来,比如说,数据库中的某个字段的取值,有可能同时存在多种,比如员工基本信息表里的擅长的外语字段,有些人仅仅擅长一门外语,有些人擅长两门,有些人擅长三门、四门,甚至有些神童从小就精通七八门外语,如果一门外语搞一个字段,人家可能擅长七八门外语,你岂不是要为他设计七八个外语字段,分别命名为外语1、外语2、外语3、……外语n,这样的表结构岂不是让人发疯?

    但是,如果外语的下拉选择框允许多选,那么可以把擅长的多门外语用逗号分隔存入一个字段中,这样岂不是轻松地解决了这个问题?

    二、面临困难

    这个功能看似很简单,做个多选框不就行了,可是仔细推敲,其实不然。

    首先,网页上的多选框在form里提交后,后台request里接收到的是一个数组,你必须在后台写程序把数组拼成逗号分隔的串,然后才能存到数据库中。

    其次,把数据取回来修改的时候,还需要把数据库中逗号分隔的串解析回数组,并展现在界面里。

    更为复杂些的要求,就是当选项非常多的时候,不能用简单的多选框,而可能要用下拉树,把数据组织成树状结构,这样才方便选择,否则几千甚至几万个选项,眼睛都要看花了。而下拉树要实现多选,那更是要费一番功夫。比如叶子节点允许多选,枝节点不允许多选等等五花八门的需求,会把人弄晕。

    幸好注重细节的润乾报表把所有这些麻烦都解决了。它为下拉列表、下拉数据集、下拉树等编辑风格都提供了多选的选项,使用起来非常方便,步骤如下:

    三、实现步骤

    1、设计一个填报表,定义下拉列表、下拉数据集、下拉树等编辑风格

    2、在这些编辑风格的属性编辑框里,把多选选项打勾

    3、发布

    四、效果演示

    展开全文
  • 下拉多选列表

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

    2019-08-22 09:13:10
    本资源是下拉多选,可以兼备多选,搜索,创建,等等,js调用
  • excel下拉多选实例

    2017-02-20 10:51:16
    excel VB 实现下拉多选功能
  • mutiselect 下拉多选插件,外观漂亮,实现下拉多选的功能,使用方便。
  • 下拉多选菜单jquery代码
  • Extjs下拉多选

    热门讨论 2012-07-22 22:29:24
    Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
  • 两种jquery 下拉多选选择chekboxs选择框 一种是树形实现 一种是纯jquery的js下拉多选
  • 下拉多选插件

    2019-07-26 18:24:32
    关于下拉多选插件select2的使用方法formSelect的用法见下 目前我了解到的下拉多选的插件有两个,一个是select2,另一个是formSelect。 本文主要介绍如何使用这两个插件。 select2的使用方法 到github上选择一个版本...


    目前我了解到的下拉多选的插件有两个,一个是select2,另一个是formSelect。
    本文主要介绍如何使用这两个插件。

    select2的使用方法

    到github上选择一个版本下载到本地

    github网址: https://github.com/select2/select2/tags;
    select2网址:https://select2.org/
    

    效果如图:
    在这里插入图片描述
    具体使用方法见代码:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="select2/css/select2.css">
    </head>
    <body>
    <div>
        <select class="js-example-basic-multiple" name="citys" multiple="multiple">
            <option value="1">2</option>
            <option value="1">3</option>
            <option value="1">4</option>
            <option value="1">5</option>
        </select>
    </div>
    </body>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="select2/js/select2.full.js"></script>
    <script>
        //select2
        $(document).ready(function () {
            $('.js-example-basic-multiple').select2({
                width: 100 + "%",
                allowClear: true,
                closeOnSelect: false
            });
    
        });
    </script>
    </html>
    

    formSelect的用法见下

    formSelect是基于layui推出的一款多选插件
    先到Github上下载相关文件

    github网址:https://github.com/hnzzmsf/layui-formSelects
    

    效果如图:
    在这里插入图片描述
    具体方法见下:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="formSelects-v4.css">
    </head>
    <body>
    <div>
        <select name="city" xm-select="select1">
            <option value="1">2</option>
            <option value="1">3</option>
            <option value="1">4</option>
            <option value="1">5</option>
        </select>
    </div>
    </body>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="formSelects-v4.js"></script>
    </html>
    
    展开全文
  • bootstrap-select下拉多选和搜索
  • 轻量级Jquery下拉多选

    2018-08-07 16:38:55
    只需要Jquery,实现的轻量级下拉多选,非常好用。代码打开就可以使用。可以下载看看,运行下应该没有问题
  • asp.net 自定义下拉多选控件

    千次下载 热门讨论 2012-03-04 10:26:24
    自定义下拉多选控件,支持多选,基于JQuery
  • 该控件支持下拉 多选、搜索。基于jquery实现,暂时没有分页加载功能,还在继续完善中
  • excel下拉复选多选_Excel下拉多选更新

    千次阅读 2020-08-05 08:54:25
    excel下拉复选多选 Excel下拉多选更新 (Excel Drop Down Multi-Select Update) I've done another update to the Data Validation Multiple Selection sample, thanks to a question from Pat, in a blog comment....

    excel下拉复选多选

    I've done another update to the Data Validation Multiple Selection sample, thanks to a question from Pat, in a blog comment. He has 3 columns with different drop down lists, and wants to add new items to the applicable lists.

    多亏了Pat的提问,我对Data Validation Multiple Selection示例进行了另一个更新。 他有3列带有不同的下拉列表,并希望将新项目添加到适用的列表。

    I can get 3 separate columns to each allow multiple selects from their own lists and to allow write in contents...But what I want ...is to make the selected columns (not all) so that write in selections are written to the lists and the lists are sorted.

    我可以得到3个单独的列,每个列允许从自己的列表中进行多个选择并允许写入内容...但是我想要的...是使选定的列(不是全部),以便将写入的选择写入到列表和列表进行排序。

    So, in the new example, on the SameCellAddSort worksheet in the sample workbook, that's what happens. You can do a multiple select in columns C and D, but only a single selection in column B.

    因此,在新示例中,在示例工作簿的SameCellAddSort工作表上,就是这样。 您可以在C和D列中进行多次选择,但在B列中只能进行一次选择。

    datavalmulticelladdsort01

    新增项目 (Add New Items)

    New items can be added to the Names and Numbers columns. If a new name is entered in column C, is will be added to the NameList range on the Lists sheet. Then, the list is sorted alphabetically.

    可以将新项目添加到“名称和编号”列。 如果在C列中输入了新名称,它将被添加到“列表”表上的“名称列表”范围。 然后,列表按字母顺序排序。

    datavalmulticelladdsort02

    下载样本文件 (Download the Sample File)

    To see the code, you can go to the Excel Data Validation - Select Multiple Items page on my Contextures site. The file contains macros, so enable them when opening the workbook.

    要查看代码,可以转到Contextures网站上的“ Excel数据验证-选择多个项目”页面。 该文件包含宏,因此在打开工作簿时启用它们。

    观看多项选择添加排序视频 (Watch the Multiple Selection Add Sort Video)

    To see how the multiple selection add and sort technique works, and see an explanation of the code, you can watch this Excel video tutorial.

    要了解多选添加和排序技术的工作原理,并查看代码说明,您可以观看此Excel视频教程。

    演示地址

    有关数据验证多项选择的更多信息 (More Information on Data Validation Multiple Selection)

    Most of the examples in the DataValMultiSelect file have limits set in the code. For example, the code might check the column number, and only allow the multiple selections if the column number is 3.

    DataValMultiSelect文件中的大多数示例都在代码中设置了限制。 例如,该代码可能会检查列号,并且仅在列号为3时才允许多项选择。

    If you remove those checks from the code, and just check for data validation in the selected cell, you could have several multi-selection lists on the same worksheet. There is an explanation on my Contextures website, for adjusting the code:

    如果您从代码中删除这些检查,而仅检查所选单元格中的数据验证,则同一工作表上可能会有多个选择列表。 我的Contextures网站上有一个解释,用于调整代码:

    Here are a few more article on the data validation multiple selection technique:

    这是有关数据验证多项选择技术的更多文章:

    翻译自: https://contexturesblog.com/archives/2011/07/08/excel-drop-down-multi-select-update/

    excel下拉复选多选

    展开全文
  • Extjs 模拟下拉多选checkbox
  • jquery插件,bootstart扩展下拉多选,简单易用................................
  • 下拉多选控件示例源码 源码描述: 自定义一款下拉多选控件学习实例 可以通过ComboBox下拉选择多项内容并且动态绑定到listbox内容中 他们之间绑定是相互影响的。
  • 继承自C# Winform中ComboBox的下拉多选控件,操作简单,效果非常好 1、多选。 2、可绑定List,DataTable,Dictionary类型的数据源。 3、在下拉列表中可显示自定义的多列数据。 4、可在下拉列表中通过输入关键字,...
  • Extjs4下拉多选扩展

    2012-06-05 16:42:57
    Extjs4下拉多选扩展
  • jqery实现下拉多选

    2013-08-14 10:22:39
    实现了下拉多选,并且可以左右选择,左右移除,页面效果非常好
  • 下拉多选的工具,里面有demo及相应的文件,做法可参照博客内容
  • 下拉多选checkbox

    千次阅读 2017-05-12 18:58:38
    下拉多选checkbox 本文原创,转载请注明出处 目录下拉多选checkbox目录 CSS代码 HTML代码 JS代码今天根据要求让实现下拉列表加入多选按钮,之前写过百度搜索效果,但是感觉不太适用。然后大概想了一下就动手开始试着...
    • 本文原创,转载请注明出处

    今天根据要求让实现下拉列表加入多选按钮,之前写过百度搜索效果,但是感觉不太适用。然后大概想了一下就动手开始试着去写,实现效果如下图:

    下拉多选

    (注:选中下拉多选框之后点击输入框及下拉以外的地方隐藏下拉。依赖JQuery,为了写的方便些。)

    CSS代码

    定义一些样式:

    <style>
          ul li{
            list-style: none;
           }
          .hide{display: none}
          .width150{
            width: 150px;
        }
          .width150 input[type="text"]{
              width: 100%;  
              height: 32px;  
              border: 1px solid #ccc;  
              border-radius: 4px;  
              padding-left: 12px;
          }
           .width150 ul{ 
               width: 96%; 
               padding: 0 0 0 20px; 
               margin: 0; 
               border: 1px solid #ccc; 
           }
           .width150 li{ 
               padding: 5px; 
           }
           .width150 li+li{ 
               border-top: 1px solid #ccc; 
           }
       </style>

    HTML代码

    定义输入框和显示下拉的ul:

    <form id="form">    
        <div class="width150">
            可多选年份:<input type="text" id="yearInput" placeholder="请选择年份" readonly>
            <ul id="yearId" class="hide">
            </ul>
        </div>
    </form>

    JS代码

    定义json数据、获取checkbox选中内容等:

    <script>
        (function(){
            var str = '';
            var arr = {
                0 : {name:'2015',id:0},
                1 : {name:'2016',id:0},
                2 : {name:'2017',id:0}
            };
            for (let x in arr){
                console.info(x);
                str += `<li><label><input type="checkbox" value="${arr[x].id}" data-name="${arr[x].name}">${arr[x].name}</label></li>`;
            }
            $('#yearId').html(str);
        })();
    
        $("#yearInput").click(function(){
            $(this).attr('placeholder','');
            var name = '';
            $('#yearId input').each(function () {//循环遍历checkbox
                var  check=$(this).is(':checked');//判断是否选中
                if(check){
                    name += $(this).attr('data-name')+',';
                    $(this).attr('name',"yearId");
                }else {
                    $(this).attr('name',"");
                }
            });
            $("#yearInput").val(name.slice(0,-1));//去除最后的逗号
        });
    
        $("#yearId").mouseover(function() {
            if (!$("#yearId").hasClass('hover')){//类hover在下面用来验证是否需要隐藏下拉,没有其他用途。
                $("#yearId").addClass('hover');
            }
        }).mouseout(function(){
            $("#yearId").removeClass('hover');
        });
    
        $(document).on('click',function() {
            if (!$("#yearInput").is(":focus") && !$("#yearId").hasClass('hover')) {//如果没有选中输入框且下拉不在hover状态。
    
                var name = '';
                $('#yearId input').each(function () {//遍历checkbox
                    var check = $(this).is(':checked');//判断是否选中
                    if (check) {
                        name += $(this).attr('data-name') + ',';
                        $(this).attr('name', "yearId");
                    } else {
                        $(this).attr('name', "");
                    }
                });
                $("#yearInput").val(name.slice(0, -1));//去除最后的逗号
                $("#yearId").addClass('hide');
            } else {
                $("#yearId").removeClass('hide');
            }
        });
    </script>

    上面代码input输入框显示的是数据的name,要是需要把id传到后端,就把checkbox的value传出去,可以用$(“#form”).serialize();获取选中的checkbox。

    要想下拉有滚动条,设置一下 ul样式:

    
    .width150 ul{
         width: 96%;
         padding: 0 0 0 20px;
         margin: 0;
         border: 1px solid #ccc;
         height: 100px;
         overflow-y: scroll;
    }

    全部代码

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>下拉多选</title>
        <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
        <style>
            ul li{
                list-style: none;
            }
            .hide{display: none}
            .width150{
                width: 150px;
            }
            .width150 input[type="text"]{
                width: 100%;
                height: 32px;
                border: 1px solid #ccc;
                border-radius: 4px;
                padding-left: 12px;
            }
            .width150 ul{
                width: 96%;
                padding: 0 0 0 20px;
                margin: 0;
                border: 1px solid #ccc;
            }
            .width150 li{
                padding: 5px;
            }
            .width150 li+li{
                border-top: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
    <form id="form">
        <div class="width150">
            可多选年份:<input type="text" id="yearInput" placeholder="请选择年份" readonly>
            <ul id="yearId" class="hide">
            </ul>
        </div>
    </form>
    <script>
        (function(){
            var str = '';
            var arr = {
                0 : {name:'2015',id:0},
                1 : {name:'2016',id:0},
                2 : {name:'2017',id:0}
            };
            for (let x in arr){
                console.info(x);
                str += `<li><label><input type="checkbox" value="${arr[x].id}" data-name="${arr[x].name}">${arr[x].name}</label></li>`;
            }
            $('#yearId').html(str);
        })();
    
        $("#yearInput").click(function(){
            $(this).attr('placeholder','');
            var name = '';
            $('#yearId input').each(function () {//循环遍历checkbox
                var  check=$(this).is(':checked');//判断是否选中
                if(check){
                    name += $(this).attr('data-name')+',';
                    $(this).attr('name',"yearId");
                }else {
                    $(this).attr('name',"");
                }
            });
            $("#yearInput").val(name.slice(0,-1));//去除最后的逗号
        });
    
        $("#yearId").mouseover(function() {
            if (!$("#yearId").hasClass('hover')){//类hover在下面用来验证是否需要隐藏下拉,没有其他用途。
                $("#yearId").addClass('hover');
            }
        }).mouseout(function(){
            $("#yearId").removeClass('hover');
        });
    
        $(document).on('click',function() {
            if (!$("#yearInput").is(":focus") && !$("#yearId").hasClass('hover')) {//如果没有选中输入框且下拉不在hover状态。
                var name = '';
                $('#yearId input').each(function () {//遍历checkbox
                    var check = $(this).is(':checked');//判断是否选中
                    if (check) {
                        name += $(this).attr('data-name') + ',';
                        $(this).attr('name', "yearId");
                    } else {
                        $(this).attr('name', "");
                    }
                });
                $("#yearInput").val(name.slice(0, -1));//去除最后的逗号
                $("#yearId").addClass('hide');
            } else {
                $("#yearId").removeClass('hide');
            }
        });
    </script>
    </body>
    </html>
    展开全文
  • 原生js实现的下拉多选控件,文件包里的demo.html列出了本文所讲方法函数的使用示例,可运行demo.html看看效果更有助于理解应用。
  • jquery-下拉多选.tar.gz

    2019-11-29 10:19:42
    jquery 开发的下拉多选等插件,本资料有html5,css,jquery等相关的一切资源文件和代码,下载后不用搭建环境即可直接点及运行
  • 下拉多选控件介绍

    千次阅读 2017-07-21 16:12:55
    推荐一个很好用的下拉多选控件,这个控件是原生js写的,使用时只需引入一个js和一张样式图片就可以了。控件人性化设计,可以根据场景需要设置相应的功能。
  • 可以下拉多选的复选框、Excel工作表

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,069
精华内容 10,427
关键字:

下拉多选