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

    2020-12-21 16:33:09
    下拉菜单多选 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{width: 500px;height: 500px;margin: 0 ...

    下拉菜单多选

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.box{width: 500px;height: 500px;margin: 0 auto;font-size: 12px;}
    			.select_more{width: 100px;height: 20px;position: relative;border-color: #a2bac0 #b8d0d6 #b8d0d6 #a2bac0;border-style: solid;border-width: 1px;cursor: default;}
    			.select_option_box{position: absolute;left: -1px;top: 19px;width: 100%;z-index: 1;background-color: #FFFFFF;border-color: #a2bac0 #b8d0d6 #b8d0d6 #a2bac0;border-style: solid;border-width: 1px;border-top: none;display: none;cursor: default;}
    			.select_item{width: 100%;line-height: 20px;padding: 1px 5px;box-sizing: border-box;}
    			.select_item input,.select_item span{display: inline-block;vertical-align: top;}
    			.select_item input{margin: 0;margin-right: 3px;margin-top: 3.5px;}
    			.select_item span{line-height: 23px;}
    			.select_checked{height: 20px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
    		</style>
    		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			$(function(){
    				var checkedIds = [], checkedArr = [];
    				// 监测岗位名称选择
    			  $(".select_item").each(function(e) {
    					$(this).click(function(e) {
    						e.stopPropagation(); // 神龙点睛之笔!!!!!
    						if($(this).find('input').attr('checked')) {
    							$(this).find('input').removeAttr('checked');
    							// 删除
    							checkedArr.splice(checkedArr.indexOf($(this).find('span').text()), 1);
    							checkedIds.splice(checkedIds.indexOf($(this).find('input').val()), 1);
    							$('#selectChecked').text(checkedArr)
    							$('#checkedStr').val(checkedIds);
    							if(checkedArr.length == 0) {
    								$('#selectChecked').text('请选择')
    							}
    						}else {
    							if($(this).find('span').text() != '请选择' && $(this).find('span').text()) {
    								$(this).find('input').attr('checked', 'checked')
    								//添加
    								checkedArr.push($(this).find('span').text());
    								checkedIds.push($(this).find('input').val());
    								$('#selectChecked').text(checkedArr)
    								$('#checkedStr').val(checkedIds);
    							}
    						}
    					})
    				})
    				//岗位名称请选择点击事件
    				$('#selectChecked').click(function(){
    					if($('#selectBox').css('display') == 'block') {
    						$('#selectBox').css('display', 'none');
    					}else {
    						$('#selectBox').css('display', 'block');
    					}
    				})
    				// 点击其他地方select消失
    				$('#body').click(function() {
    					 $('#selectBox').css('display', 'none');
    				})
    			})
    		</script>
    	</head>
    	<body id="body">
    		<div class="box">
    			<input type="text" name="" id="checkedStr" value="" />
    			<div class="select_more">
    				<div class="select_item select_checked" id="selectChecked">请选择</div>
    				<div class="select_option_box" id="selectBox">
    					<div class="select_item">
    						<input type="checkbox" value="1" /><span>团队经理</span>
    					</div>
    					<div class="select_item">
    						<input type="checkbox" value="2" /><span>业务管理</span>
    					</div>
    					<div class="select_item">
    						<input type="checkbox" value="3" /><span>综合事务</span>
    					</div>
    					<div class="select_item">
    						<input type="checkbox" value="4" /><span>授权审批</span>
    					</div>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    
    展开全文
  • Angular实现下拉菜单多选 写这篇文章时,引用文章地址如下: http://ngmodules.org/modules/angularjs-dropdown-multiselect http://dotansimha.github.io/angularjs-dropdown-multiselect/#/ ...

    Angular实现下拉菜单多选

    写这篇文章时,引用文章地址如下:

    http://ngmodules.org/modules/angularjs-dropdown-multiselect

    http://dotansimha.github.io/angularjs-dropdown-multiselect/#/

    AngularJS Dropdown Multiselect

    This directive gives you a Bootstrap Dropdown with the power of AngularJS directives.

    Features

    Based on Bootstrap's dropdown.

    jQuery is not necessary.

    Seperated your data and the selection data. no modification to the data made.

    Built-in search.

    Complete control on the selected items model to fit it to your requirements.

    Two view options: normal list and checkboxes.

    Pre-selected values.

    Limit selection count.

    Grouping items by property.

    Callback events.

    Demo

    http://dotansimha.github.io/angularjs-dropdown-multiselect/

    Dependencies

    required: AngularJS >= 1.2, Lodash >= 2, Bootstrap >= 3.0

    Make sure to add the dependencies before the directive's js file.

    Note: Bootstrap JS file is not needed for the directive, it just uses the CSS file.

    Install

    Download the files

    Using bower:

    Just run bower install angularjs-dropdown-multiselect

    Manually: You can download the .js file directly or clone this repository.

    Include the file in your app

    <script type="text/javascript" src="angularjs-dropdown-multiselect.js"></script>.

    You can also use the minfined version (angularjs-dropdown-multiselect.min.js).

    Include the module in angular (i.e. in app.js) - angularjs-dropdown-multiselect

    Usage and Documentation

    See the documentation and examples in the GitHub pages: http://dotansimha.github.io/angularjs-dropdown-multiselect/

    由以上英文文档可以得知,若使用angularjs-dropdown-multiselect,首先需要在index.html中引入AngularJS >= 1.2, Lodash >= 2, Bootstrap >= 3.0,如下所示:

    <script src="js/angularjs-dropdown-multiselect.js"></script>

    <script src="js/lodash.min.js"></script>

    并在app.js模块中添加依赖angularjs-dropdown-multiselect。如下所示:

    var routerApp = angular.module('routerApp', ['ui.router''ngCookies''ngTable''angularjs-dropdown-multiselect''MedListModule']);

    yh_set_dtl.html核心代码如下:

    <div style="float:left">优 惠 类 型:</div>

    <!-- Demo -->

    <div ng-dropdown-multiselect="" 

     options="yhctlModelOptions" 

     selected-model="yhctlModel"

     checkboxes="true">

    </div>

    controllers.js代码如下:

     $scope.yhctlModel = [];

     

     $scope.yhctlModelOptions = [ 

                                  {id: 1, label: '限定用户'}, 

                                  {id: 2, label: "限定商家"}, 

                                  {id: 3, label: "限定使用次数"},

                                  {id: 4, label: "限定药品"}, 

                                  {id: 5, label: "与其它优惠共享"}];

    效果图如下:

     

    展开全文
  • excel设置下拉菜单多选 如何设置多选Excel下拉菜单 (How to Set up Multiple Selection Excel Drop Down) [Latest update: July 27, 2016] With a bit of Excel VBA programming, you can change an Excel data ...

    excel设置下拉菜单多选

    [Latest update: July 27, 2016] With a bit of Excel VBA programming, you can change an Excel data validation drop down list, so it allows multiple selections. This post is a roundup of articles on how to set up multiple selection Excel drop down lists.

    [最新更新:2016年7月27日]借助Excel VBA编程,您可以更改Excel数据验证下拉列表,因此可以进行多个选择。 这篇文章是有关如何设置多选Excel下拉列表的文章摘要。

    多选下拉菜单 (Multiple Selection Drop Downs)

    You can find a sample file and instructions, in a blog post that I wrote a couple of years ago – Select Multiple Items from Excel Data Validation List.

    您可以在几年前写的博客文章中找到示例文件和说明- 从Excel数据验证列表中选择多个项目

    There is a video in that post, that shows how the multiple selection options work, and a peek at the code that makes the multiple selections possible.

    该帖子中有一个视频,显示了多个选择选项的工作方式,并介绍了使多个选择成为可能的代码。

    设置工作簿 (Setting up the Workbook)

    Even though the post is a couple of years old, it still gets comments and questions. This week, Rick asked for details on setting up a new workbook, and copying the sample code into the new file. To help, I've recorded another video, showing the setup steps.

    尽管该帖子已有两年历史,但仍然收到评论和问题。 本周,Rick询问有关设置新工作簿并将示例代码复制到新文件中的详细信息。 为了帮助您,我录制了另一个视频,显示了设置步骤。

    演示地址

    有关选择多个项目的更多文章 (More Articles on Select Multiple Items)

    [Update]: Since posting this article on selecting multiple items from an Excel drop down list, I've added  more articles on the same topic. Please read these updates, for more details on working with the VBA code:

    [更新]:由于发布了有关从Excel下拉列表中选择多个项目的文章,因此我添加了更多关于同一主题的文章。 请阅读这些更新,以获取有关使用VBA代码的更多详细信息:

    更改宏代码 (Changing the Macro Code)

    If you need to change the column numbers in the code, there are instructions here. To run the code on a protected worksheet, see the notes here.

    如果您需要更改代码中的列号,请参见此处的说明 。 要在受保护的工作表上运行代码, 请参见此处的注释

    下载样本数据验证文件 (Download the Sample Data Validation File)

    To experiment with this technique, you can download the zipped sample file from the Contextures website, on the Excel Data Validation - Select Multiple Items page.

    若要试验此技术,可以从Contextures网站的“ Excel数据验证-选择多个项目”页上下载压缩的示例文件。

    获取高级版 (Get the Premium Version)

    There is a premium version of this technique, and you can see the details here: Data Validation Multi Select Premium. Instead of selecting from the drop down, a list box appears when you click the cell.

    该技术有一个高级版本,您可以在此处查看详细信息: 数据验证多选高级 。 单击该单元格时,会出现一个列表框,而不是从下拉列表中进行选择。

    It automatically selects any items that are already in the cell. It also has buttons to Clear all the selections, and select all the items.

    它会自动选择单元格中已经存在的所有项目。 它还具有清除所有选择并选择所有项目的按钮。

    The premium version works with dependent lists too, and runs on a protected worksheet. There is also an option of showing a multi-select listbox, or a single-select version (this is helpful when working with dependent lists -- you don't want multiple items selected in the main columns).

    高级版本也可用于从属列表,并在受保护的工作表上运行。 还有一个显示多选列表框或单选版本的选项(这在处理从属列表时很有用-您不希望在主列中选择多个项目)。

    The kit has 3 Excel files, and a user guide, with details and screen shots, on how to add this technique to your own workbooks. Click here for details: Data Validation Multi Select Premium. _____________

    该工具包包含3个Excel文件和一个用户指南,其中包含有关如何将此技术添加到您自己的工作簿中的详细信息和屏幕截图。 单击此处了解详细信息: 数据验证多选Premium 。 ______________

    翻译自: https://contexturesblog.com/archives/2011/04/29/how-to-set-up-multiple-selection-excel-drop-down/

    excel设置下拉菜单多选

    展开全文
  • Spinner下拉菜单多选,在布局xml文件直接作为控件使用,在activity里面调用就行了
  • android studio,demo,Spinner下拉菜单多选的实现,android studio3.0.1的环境下使用。
  • angular2-multiselect-dropdown, Angular 2下拉菜单多选 Angular2多选下拉菜单 Angular 2用于网络应用程序的多功能下拉菜单。 易于集成和使用。 文档| 演示/示例。 table-内容 1开始启动 。 安装 3使用 。 模板 5...
  • AngularJS进阶 五 Angular实现下拉菜单多选
                   

    Angular实现下拉菜单多选

    写这篇文章时,引用文章地址如下:

    http://ngmodules.org/modules/angularjs-dropdown-multiselect

    http://dotansimha.github.io/angularjs-dropdown-multiselect/#/

    AngularJS Dropdown Multiselect

    This directive gives you a Bootstrap Dropdown with the power of AngularJS directives.

    Features

    Based on Bootstrap's dropdown.

    jQuery is not necessary.

    Seperated your data and the selection data. no modification to the data made.

    Built-in search.

    Complete control on the selected items model to fit it to your requirements.

    Two view options: normal list and checkboxes.

    Pre-selected values.

    Limit selection count.

    Grouping items by property.

    Callback events.

    Demo

    http://dotansimha.github.io/angularjs-dropdown-multiselect/

    Dependencies

    required: AngularJS >= 1.2, Lodash >= 2, Bootstrap >= 3.0

    Make sure to add the dependencies before the directive's js file.

    Note: Bootstrap JS file is not needed for the directive, it just uses the CSS file.

    Install

    Download the files

    Using bower:

    Just run bower install angularjs-dropdown-multiselect

    Manually: You can download the .js file directly or clone this repository.

    Include the file in your app

    <script type="text/javascript" src="angularjs-dropdown-multiselect.js"></script>.

    You can also use the minfined version (angularjs-dropdown-multiselect.min.js).

    Include the module in angular (i.e. in app.js) - angularjs-dropdown-multiselect

    Usage and Documentation

    See the documentation and examples in the GitHub pages: http://dotansimha.github.io/angularjs-dropdown-multiselect/

    由以上英文文档可以得知,若使用angularjs-dropdown-multiselect,首先需要在index.html中引入AngularJS >= 1.2, Lodash >= 2, Bootstrap >= 3.0,如下所示:

    <script src="js/angularjs-dropdown-multiselect.js"></script>

    <script src="js/lodash.min.js"></script>

    并在app.js模块中添加依赖angularjs-dropdown-multiselect如下所示:

    var routerApp = angular.module('routerApp', ['ui.router''ngCookies''ngTable''angularjs-dropdown-multiselect''MedListModule']);

    yh_set_dtl.html核心代码如下:

    <div style="float:left">优 惠 类 型:</div>

    <!-- Demo -->

    <div ng-dropdown-multiselect="" 

     options="yhctlModelOptions" 

     selected-model="yhctlModel"

     checkboxes="true">

    </div>

    controllers.js代码如下:

     $scope.yhctlModel = [];

     

     $scope.yhctlModelOptions = [ 

                                  {id: 1, label: '限定用户'}, 

                                  {id: 2, label: "限定商家"}, 

                                  {id: 3, label: "限定使用次数"},

                                  {id: 4, label: "限定药品"}, 

                                  {id: 5, label: "与其它优惠共享"}];

    效果图如下:

     

               

    再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

    展开全文
  • 最近公司要做Excel的模板导出,导入数据的工作,导出时还要动态生成模板,并且生成单选下拉菜单,和多选下拉菜单。开始搞这个很快除了多选的都搞定了,就是多选卡住了。弄了很久。。。最后终于在和多方面的交流下...
  • 实现下拉菜单多选

    千次阅读 2017-10-23 14:30:58
    下拉多选      ul li{  list-style: none;  }  .hide{display: none}  .width150{  width: 150px;  }  .width150 input[type="text"]
  • 一:出现的问题 二:修改 .el-select__tags { width: 100%; display: inline-block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ...三:更改后
  • 先看效果 protected function form() { $form = new Form(new IbrandGoodsModel()); $form->text('name', __('模型名称'));... $data = IbrandGoodsSpec::getAllSpec();... foreach ($data as $k =&.
  • 我现在页面用的是layui ,现在需要做一个 下拉菜单多选 <select id="aa" name="aa" xm-select="select4" > </select> 这个下拉菜单多选我是做出来的 但现在这个菜单里面的值,是需在动态写入 ...
  • 这次项目需要实现一个多选下拉菜单,并且该菜单要和上级下拉菜单保持联动。更加麻烦的是,我需要完成以下操作,以省、市二级联动菜单为例:选择河北省 >> 二级菜单显示河北省所有市 >> 多选其中石家庄、...
  • 页面写法 < div class= "" id= "returnReasons" data-options= ...设置下拉选中值 $( '#materialMissing' ). combo ( 'setValue' , _value ). combo ( 'setText' , _text ) ; }) ; }) ; 
  • 其中用下拉菜单进行查询参数选择时一般情况下只能选择一个查询参数,本文来介绍运用润乾报表设计器设计报表时如何实现查询参数多选的功能。 首先设计一个报表,如下图所示。 给报表添加一个参数,如下图所示,...
  • js css3下拉城市菜单多选代码,js css3下拉城市菜单多选代码,js css3下拉城市菜单多选代码
  • js css3下拉城市菜单多选代码模板,由HTML+css+js完成模板
  • js css3下拉城市菜单多选代码 基于css3制作圆形下拉框,点击滑动展开收缩城市菜单,支持多选/勾选城市效果。这是一款实用的下拉菜单选择代码。 演示地址 下载地址
  • 这是在一个项目中,为了满足样式美观、多级菜单以及多选而将zTree插件更改过后的效果。 在实际的开发过程中,本来zTree也是可以满足需求的,但是zTree多选的话需要checkbox选择框,这样导致样式风格和项目总体不...
  • jQuery自定义下拉分类多选代码是一款基于jQuery Select制作的下拉框插件自定义下拉分类菜单多选分类搜索功能代码。
  • jQuery自定义下拉分类多选代码是一款基于jQuery Select制作的下拉框插件自定义下拉分类菜单多选分类搜索功能代码。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 494
精华内容 197
关键字:

下拉菜单多选