精华内容
下载资源
问答
  • jquery.multi-select.js是一款jQuery多选下拉框插件。该插件可以将select元素转换为带checkbox的多选下拉框,非常实用。使用方法在页面中引入下面的文件。lt;link rel="stylesheet" type="text/css" href="./src/...

    jquery.multi-select.js是一款jQuery多选下拉框插件。该插件可以将select元素转换为带checkbox的多选下拉框,非常实用。

    使用方法

    在页面中引入下面的文件。

    lt;link rel="stylesheet" type="text/css" href="./src/example-styles.css"gt;

    lt;script src="js/jquery.min.js" type="text/javascript"gt;lt;/scriptgt;

    lt;script type="text/javascript" src="./src/jquery.multi-select.js"gt;lt;/scriptgt;

    HTML结构

    lt;select id="languages" name="languages" multiplegt;

    lt;option value="JavaScript"gt;JavaScriptlt;/optiongt;

    lt;option value="C++"gt;C++lt;/optiongt;

    lt;option value="Python"gt;Pythonlt;/optiongt;

    lt;option value="Ruby"gt;Rubylt;/optiongt;

    lt;option value="PHP"gt;PHPlt;/optiongt;

    lt;option value="Pascal"gt;Pascallt;/optiongt;

    lt;/selectgt;

    初始化插件

    $('#languages').multiSelect();

    CSS样式

    .multi-select-container {

    display: inline-block;

    position: relative;

    }

    .multi-select-menu {

    position: absolute;

    left: 0;

    top: 0.8em;

    float: left;

    min-width: 100%;

    background: #fff;

    margin: 1em 0;

    padding: 0.4em 0;

    border: 1px solid #aaa;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

    display: none;

    }

    .multi-select-menu input {

    margin-right: 0.3em;

    vertical-align: 0.1em;

    }

    .multi-select-button {

    display: inline-block;

    font-size: 0.875em;

    padding: 0.2em 0.6em;

    max-width: 20em;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    vertical-align: -0.5em;

    background-color: #fff;

    border: 1px solid #aaa;

    border-radius: 4px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

    cursor: default;

    }

    .multi-select-button:after {

    content: "";

    display: inline-block;

    width: 0;

    height: 0;

    border-style: solid;

    border-width: 0.4em 0.4em 0 0.4em;

    border-color: #999 transparent transparent transparent;

    margin-left: 0.4em;

    vertical-align: 0.1em;

    }

    .multi-select-container--open .multi-select-menu { display: block; }

    .multi-select-container--open .multi-select-button:after {

    border-width: 0 0.4em 0.4em 0.4em;

    border-color: transparent transparent #999 transparent;

    }

    配置参数

    $('#languages').multiSelect({

    // 自定义HTML模板

    'containerHTML': 'lt;div class="multi-select-container"gt;',

    'menuHTML': 'lt;div class="multi-select-menu"gt;',

    'buttonHTML': 'lt;span class="multi-select-button"gt;',

    'menuItemsHTML': 'lt;div class="multi-select-menuitems"gt;',

    'menuItemHTML': 'lt;label class="multi-select-menuitem"gt;',

    'presetsHTML': 'lt;div class="multi-select-presets"gt;',

    // sets some HTML (eg: lt;div class="multi-select-modal"gt;) to enable the modal overlay.

    'modalHTML': undefined,

    // Active CSS class

    'activeClass': 'multi-select-container--open',

    // Text to show when no option is selected

    'noneText': '-- Select --',

    // Text to show when all options are selected

    'allText': undefined,

    // an array of preset option groups

    'presets': undefined,

    // CSS class added to the container, when the menu is about to extend beyond the right edge of the position Menu Within element

    'positionedMenuClass': 'multi-select-container--positioned',

    // If you provide a jQuery object here, the plugin will add a class (see positionedMenuClass option) to the container when the right edge of the dropdown menu is about to extend outside the specified element, giving you the opportunity to use CSS to prevent the menu extending, for example, by allowing the option labels to wrap onto multiple lines.

    'positionMenuWithin': undefined,

    // The plugin will attempt to keep this distance, in pixels, clear between the bottom of the menu and the bottom of the viewport, by setting a fixed height style if the menu would otherwise approach this distance from the bottom edge of the viewport.

    'viewportBottomGutter': 20,

    // minimal height

    'menuMinHeight': 200

    });

    展开全文
  • html多选下拉框

    热门讨论 2013-04-09 13:52:06
    html多选下拉框 ,CheckBox的Select组件。可多选的下拉框。
  • layui多选下拉框

    万次阅读 2019-09-05 16:57:33
    下载组件: layui多选下拉框下载地址 文档地址:layui多选下拉框文档地址 目录结构: html: <head> <meta charset="utf-8" /> <title>layui-select</title> <link rel=...

    在这里插入图片描述
    下载组件: layui多选下拉框下载地址
    文档地址:layui多选下拉框文档地址
    目录结构:
    在这里插入图片描述
    html:

    	<head>
    		<meta charset="utf-8" />
    		<title>layui-select</title>
    		<link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    	</head>
    	<body>
    		<div class="layui-container">
    			<form class="layui-form" method="post">
    				<div class="layui-form-item">
    					<label class="layui-form-label">多选</label>
    					<div class="layui-input-block" id="tag_ids">
    
    					</div>
    				</div>
    				<div class="layui-form-item" style="text-align:center;">
    					<div class="layui-input-block">
    						<button type="button" class="layui-btn" lay-submit="" lay-filter="demo">console.log</button>
    					</div>
    				</div>
    			</form>
    			<div id="btn-wrap">
    				<button type="button" class="layui-btn set1">设置多级1</button>
    				<button type="button" class="layui-btn set2">设置多选1</button>
    			</div>
    		</div>
    	</body>
    	<script charset="UTF-8" src="./layui/layui.js"></script>
    

    js:

    var tagData = [
    		{"id": 12,"name": "芒果四季春","status": 0}
    		,{"id": 13,"name": "抹茶奶盖","status": 0}
    		,{"id": 14,"name": "烧仙草","status": 0}
    		,{"id": 15,"name": "原味奶茶","status": 0}
    		,{"id": 16,"name": "红泪沙","status": 0}
    		,{"id": 17,"name": "西瓜奶茶","status": 0}
    		,{"id": 18,"name": "毒药","status": 0}
    		];
    		layui.config({
    			base: './'
    		}).extend({
    			selectN: './layui_extends/selectN',
    			selectM: './layui_extends/selectM',
    		}).use(['layer', 'form', 'jquery', 'selectN', 'selectM'], function() {
    			$ = layui.jquery;
    			var form = layui.form,
    				selectN = layui.selectN,
    				selectM = layui.selectM;
    			//多选标签-所有配置
    			var tagIns = createSelectM("#tag_ids",tagData,"tag2",[12,17]);
    			form.on('submit(demo)', function(data) {
    				console.log('tagIns 当前选中的值名:', tagIns.selected);
    				console.log('tagIns 当前选中的值:', tagIns.values);
    				console.log('tagIns 当前选中的名:', tagIns.names);
    				console.log('');
    				var formData = data.field;
    				console.log('表单对象:', formData);
    			})
    			//通过js动态选择
    			$('.set1').click(function() {
    				tagIns.set([6, 18]);
    			});
    			//通过js动态选择
    			$('.set2').click(function() {
    				tagIns.set([12, 13, 14, 15]);
    			});
    /**
     * 创建多选下拉框
     * @param domId
     * @param data
     * @param inputName
     * @param selected
     * @param isRequired
     * @returns {*}
     */
    function createSelectM(domId, data, inputName, selected=[],isRequired=true) {
        var options = {
            //元素容器【必填】
            elem: domId
            //候选数据【必填】
            , data: data
            //默认选中的值
            , selected: selected
            //最多选中个数,默认5
            , max: data.length
            //input的name 不设置与选择器相同(去#.)
            , name: inputName
            //值的分隔符
            , delimiter: ','
            //候选项数据的键名
            , field: {idName: 'id', titleName: 'name'}
        };
        if(isRequired==true){
            // options = Object.assign({verify: 'required'}, options);
            options.verify='required';
        }
        return selectM(options);
    }
    
    });
    

    打印值:
    在这里插入图片描述
    在这里插入图片描述
    升级版的多选框

    展开全文
  • 使用jquery实现的风格的多选下拉框demo,直接打开index.html就可以使用。适合集成到后台系统的多选下拉框业务场景
  • 需要引用的js 和css文件 <link href="~/Content/scripts/layui-formSelects/formSelects-v4...--多选下拉框HTML代码--> <div class="layui-form-item"> <div class="layui-inline"> <label cl

    需要引用的js 和css文件

    <link href="~/Content/scripts/layui-formSelects/formSelects-v4.css" rel="stylesheet" />

    留下qq,我私发

    废话不说了,直接上代码

    1.HTML代码

    <!--多选下拉框HTML代码-->
    <div class="layui-form-item">
    	<div class="layui-inline">
    		<label class="layui-form-label">单位</label>
    		<div class="layui-input-inline" style="width:500px">
    			<select name="ReceiveOrgan" xm-select="ReceiveOrgan" id="ReceiveOrgan">
    				<option value=""></option>
    			</select>
    		</div>
    	</div>
    </div>
    

    2.JS 代码

    // 初始化搜索下拉菜单  赋值和不赋值
    function GetDrop() {
    	//全局定义一次, 加载formSelects
    	layui.config({
    		base: '/Content/scripts/layui-formSelects/' //此处路径请自行处理, 可以使用绝对路径
    	}).extend({
    		formSelects: 'formSelects-v4'
    	});
    
    	// 初始化不赋值
    	layui.use('formSelects', function () {
    		formSelects = layui.formSelects;
    
    		formSelects.data('ReceiveOrgan', 'server', {
    			url: url
    		});
    	});
    	
    	// 初始化并赋值
    	layui.use('formSelects', function () {
    		formSelects = layui.formSelects;
    		var ltArr;
    		var lt = '1,2,3,4';
    		if (lt.length > 0) {
    			ltArr = lt.split(',');
    		}
    		layui.formSelects.config('ReceiveOrgan', {
    			searchUrl: url,
    			success: function (id, url, searchVal, result) {
    				formSelects.value('ReceiveOrgan', ltArr);
    			}
    		});
    	});
    }
    

    3.后台方法

    //后台方法
    public ActionResult GetDropDown()
    {
    	string sql = @"select code,name from table";
    	var list = DbHelper.SqlQueryForDataTatable(sql).ToDataList<Model>();
    	// 多选
    	var result = list.Select(t => new { name = t.name, value = t.code });
    	return Content(result.ToJson());
    }
    

     

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

    2013-09-03 15:38:40
    html中有自带的多选下拉框,只要设置select的multiple="multiple" 如下: &lt;select multiple="multiple"&gt;&lt;/select&gt;  但是其效果难以接受,而且选择操作不方便,...

    html中有自带的多选下拉框,只要设置select的multiple="multiple"

    如下:

    <select  multiple="multiple"></select>

     但是其效果难以接受,而且选择操作不方便,于是简单实现了一个多选下拉框,效果如下:

     

     

    引入js、css 见附件multiple.zip(jquery 1.4以上,之前版本没测过)

    multiple-select.css

    jquery.js
    multiple-select.js

     

    html代码如下注意 targetObjectId  targetObjectName  值对应的input

    <div>
    	<input type="hidden" id="s_zoneStatId"    />
    	<input type="text" id="s_zoneStatName"   />
    	<div class="multipeSelect"   
    style="display: none; position: absolute;" 
    targetObjectId = "s_zoneStatId" 
    targetObjectName = "s_zoneStatName" >
    	           <ul>
    		                               <li>
    		                               		<input value="1" type="checkbox">
    		                               		<span>待评测</span>
    		                               </li>
    		                            
    		                               <li>
    		                               		<input value="2" type="checkbox">
    		                               		<span>评测中</span>
    		                               </li>
    		                            
    		                               <li>
    		                               		<input value="3" type="checkbox">
    		                               		<span>已评测</span>
    		                               </li>
    		                            
    		                               <li>
    		                               		<input value="4" type="checkbox">
    		                               		<span>已定级</span>
    		                               </li>
    		                            
    	                       		
    	           </ul>
    	           <a href="javascript:void(0)"  class="click">清空</a>
    	           <a href="javascript:void(0)"  class="click">反选</a>
    	  </div>
    </div>

     

     

    页面插入如下js代码

    <script type="text/javascript">
     $(document).ready(function(){
            new MultipeSelect();
        });
    </seript>

     

     

     

    展开全文
  • JQuery 多选下拉框

    2016-12-11 14:08:49
    JQuery 多选下拉框 思路: 1.一个text框,获取焦点时显示带有多选框的div 2.默认带有多选框的div隐藏,div宽度为text框宽度 3.选择多选框,点击确定,获取多选框内容赋值给text框,并隐藏div html代码: ...
  • 基础上自定义了样式,这样既统一又美观,这个jQuery自定义多选下拉框插件还提供下拉项搜索功能,当下拉项比较多时还是挺实用的。另外,这个jQuery插件的使用十分简单,页面加载后调用两行初始化代码即可。
  • 多选下拉框插件-sumoselect 开发语言:JavaScriptHTML/CSS 需要的包: 1.sumoselect.css 2.jquery包 3.jquery.sumoselect.min.js (文末有下载地址) 简单示例: jsp代码 <select id="gycs_...
  • 多选下拉框控件

    2016-08-03 15:43:34
    使用js, css, html实现多选下拉列表的功能
  • 多选下拉框

    2019-10-08 14:03:22
    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/fSelect.css" />...
  • 1 <!DOCTYPE html> 2 <html> 3 <head>...Bootstrap3级联多选下拉框</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" href="F:/webClient/bo...
  • 今天做的项目要用到多选的下拉框,开始想在网上找一个插件用用,可是,网上的插件看起来都比较杂乱,我参考了网上的一些插件,自己用jquery写了一个多选下拉框,js写得比较简洁。代码如下。js代码(function(){$.fn....
  • selectPicker 多选下拉框插件

    千次阅读 2018-10-15 15:13:21
    首先,因为它是个bootstrap的多选下拉框插件,所以html页面引入js和css: &lt;script src="../../common/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;script src="....
  • 因为工作需要,引入combobox多选下拉框,并且获取选择的值并以","分开。  效果如下:    代码如下: 1 <html> 2 <head> 3 <title> 4 easyui-combobox多选 5 </title> 6...
  • 多选下拉框xmSelect

    2020-12-24 18:48:55
    Html <div class="layui-inline"> <div id="payedEnum" class="xm-select-demo" style="width: 100%;display: inline-block;padding-right: 60px"></div> </div> js 引入xmSelect控件...
  • 在做项目时,有木有和在下一样遇到要求设计一个简洁的多选下拉框呢。类似于下面这种: 不多说,直接附上代码: <html><head><meta charset="utf-8"> <script type="text/javascript" ...
  • 纯JS控制实现多选拉下框并且带全模糊查询,不是首字母查询,打勾多选并带回隐藏值,非常实用!!
  • dropdown多选下拉框

    千次阅读 2018-10-29 19:52:00
    写好了一个dropdown多选框。直接粘下面代码就能用 效果展示: temp2.jsp <%@page import=...%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&...
  • 无限极多选下拉框

    2018-08-22 11:40:35
    项目中用到的,自己写的插件。 没法上传代码= =、直接上代码吧。 js ... * 使用方法myselecttree = $(dom).zdSelectTree(options) ... * data: [],下拉树数据,格式见zdSelectTreeDemo.html中参数 maxHeight:'1...
  • js取得多选下拉框选中的多个值

    千次阅读 2017-12-28 16:10:02
    方法:获取多选下拉框对象数组→循环判断option选项的selected属性(true为选中,false为未选中)→使用value属性取出选中项的值。实例演示如下: 1、HTML结构 1 2 3 4 5 6 7 ...
  • jquery 多选下拉框

    2016-03-04 16:15:00
    下载:jquery多选 转载于:https://www.cnblogs.com/sishahu/p/5242485.html
  • LayUI # 多选下拉框

    2019-12-21 16:53:42
    我的项目中使用的是formSelects-v4.js,但是现在以及对此引用停止更新了。 现在提供一下学习网址:https://hnzzmsf.github.io/example/example_v4.html 目前使用的是xm-select ...讲讲我是怎么使用的下拉框吧。...
  • js 可模糊查询可多选下拉框,获取值 html <div class="input-group"> <span class="input-group-addon">备品备件设备</span> <select id="equipName" name="equipName" class="form-control ...
  • 因为最近在做项目的时候,需要用到多选下拉框,所以自己写了一个,效果见下(支持热键): 源码下载:/Files/wliang22/多选下拉框.rar 如果发现bug请告知我,谢谢! 转载于:...
  • asp.net多选下拉框

    热门讨论 2011-12-21 17:05:18
    转自http://www.cnblogs.com/FrankYao/archive/2011/10/10/dropdowncheckboxlist.html。不敢独享,更不敢收分。先对这位大神表示感谢。 DropDownCheckBoxList 控件继承 DropDownList ; 整个控件由四部分组成:一个...
  • 多选下拉框功能,html本身就提供,multiple就可以了。但是这个multiple有个缺点,那就是高度和宽度是固定的,无法改变,很占用页面空间。 下面两张图,右边的是html原生的multiple,左边的是纯js完成的。 左图:...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 314
精华内容 125
关键字:

多选下拉框html