精华内容
下载资源
问答
  • layui的插件效果,优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,...
  • Layui 下拉框多选

    2021-03-10 17:20:31
    div class="layui-form-item"> <label class="layui-form-label layui-form-required">角色:</label> <div class="layui-input-block"> <div id="userEditRoleSel"></div> <...
    <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">角色:</label>
                <div class="layui-input-block">
                    <div id="userEditRoleSel"></div>
                </div>
            </div>
    

    layui.use([‘upload’, ‘func’, ‘form’,‘laydate’,‘cascader’,‘admin’,‘tagsInput’,‘xmSelect’], function() {
    渲染多选下拉框
    var insRoleSel = xmSelect.render({
    el: ‘#userEditRoleSel’,
    name: ‘userEditRoleSel’,
    layVerify: ‘required’,
    layVerType: ‘tips’,
    data: [{
    name: ‘管理员’,
    value: 1
    }, {
    name: ‘普通用户’,
    value: 2
    }, {
    name: ‘游客’,
    value: 3
    }]
    });
    })

    在这里插入图片描述
    需引入的js

    https://demo.easyweb.vip/iframe/assets/module/xmSelect.js?v=318

    展开全文
  • 今天小编就为大家分享一篇layui下拉框获取下拉值(select)的例子,具有好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui下拉框多选功能

    2021-03-31 15:54:53
    /* 下拉多选样式 需要引用*/ select[multiple]+.layui-form-select>.layui-select-title>input.layui-input { border-bottom: 0 } select[multiple]+.layui-form-select dd { padding: 0; } select...

    在这里插入图片描述
    复制下方代码样式,以及select信息中的 multiple 即可

    <style>
    /* 下拉多选样式 需要引用*/
    select[multiple]+.layui-form-select>.layui-select-title>input.layui-input
    	{
    	border-bottom: 0
    }
    
    select[multiple]+.layui-form-select dd {
    	padding: 0;
    }
    
    select[multiple]+.layui-form-select .layui-form-checkbox[lay-skin=primary]
    	{
    	margin: 0 !important;
    	display: block;
    	line-height: 36px !important;
    	position: relative;
    	padding-left: 26px;
    }
    
    select[multiple]+.layui-form-select .layui-form-checkbox[lay-skin=primary] span
    	{
    	line-height: 36px !important;
    	padding-left: 10px;
    	float: none;
    }
    
    select[multiple]+.layui-form-select .layui-form-checkbox[lay-skin=primary] i
    	{
    	position: absolute;
    	left: 10px;
    	top: 0;
    	margin-top: 9px;
    }
    
    .multiSelect {
    	line-height: normal;
    	height: auto;
    	padding: 4px 10px;
    	overflow: hidden;
    	min-height: 38px;
    	margin-top: -38px;
    	left: 0;
    	z-index: 99;
    	position: relative;
    	background: none;
    }
    
    .multiSelect a {
    	padding: 2px 5px;
    	background: #908e8e;
    	border-radius: 2px;
    	color: #fff;
    	display: block;
    	line-height: 20px;
    	height: 20px;
    	margin: 2px 5px 2px 0;
    	float: left;
    }
    
    .multiSelect a span {
    	float: left;
    }
    
    .multiSelect a i {
    	float: left;
    	display: block;
    	margin: 2px 0 0 2px;
    	border-radius: 2px;
    	width: 8px;
    	height: 8px;
    	padding: 4px;
    	position: relative;
    	-webkit-transition: all .3s;
    	transition: all .3s
    }
    
    .multiSelect a i:before, .multiSelect a i:after {
    	position: absolute;
    	left: 8px;
    	top: 2px;
    	content: '';
    	height: 12px;
    	width: 1px;
    	background-color: #fff
    }
    
    .multiSelect a i:before {
    	-webkit-transform: rotate(45deg);
    	transform: rotate(45deg)
    }
    
    .multiSelect a i:after {
    	-webkit-transform: rotate(-45deg);
    	transform: rotate(-45deg)
    }
    
    .multiSelect a i:hover {
    	background-color: #545556;
    }
    
    .multiOption {
    	display: inline-block;
    	padding: 0 5px;
    	cursor: pointer;
    	color: #999;
    }
    
    .multiOption:hover {
    	color: #5FB878
    }
    
    @font-face {
    	font-family: "iconfont";
    	src:
    		url('data:application/x-font-woff;charset=utf-8;base64,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')
    		format('woff')
    }
    
    .iconfont {
    	font-family: "iconfont" !important;
    	font-size: 16px;
    	font-style: normal;
    	-webkit-font-smoothing: antialiased;
    	-moz-osx-font-smoothing: grayscale;
    }
    
    .icon-fanxuan:before {
    	content: "\e837";
    }
    
    .icon-quanxuan:before {
    	content: "\e623";
    }
    
    .icon-qingkong:before {
    	content: "\e63e";
    }
    </style>
    `<div class="layui-inline">
    					  <label class="layui-form-label">商品类别:</label>
    					  <div class="layui-input-block">
    					   <select id="categoryCode" name="categoryCode"  multiple >
    					   		<option value=""></option>
    					   		<option value="30">30_烟酒水饮</option>
    					   		<option value="31">31_休闲食品</option>
    					   		<option value="32">32_冲调食品</option>
    					   		<option value="33">33_粮油调味</option>
    		 </select>
    					  </div>
    				 </div>
    ``
    
    
    
    展开全文
  • 直接上代码: for(var i=0;i<arr.length;i++){ $('#week').find("option[value="+arr[i]+"]").attr("selected",true); } form.render(); //再次渲染

    直接上代码:

    for(var i=0;i<arr.length;i++){
    $('#week').find("option[value="+arr[i]+"]").attr("selected",true);
    }
    form.render(); //再次渲染
    
    展开全文
  • layui下拉框多选以及回显

    千次阅读 2020-09-23 16:02:06
    前端组件(来自layui组件库) 前端写法: 引用js组件 主要加上标签 xm-select=“kcqytype” <div class="Y109_ItemInline"> <label class="Mkh_FormLabel">科创企业类型</label> <div ...

    前端组件(来自layui组件库)

    在这里插入图片描述
    前端写法:

    引用js组件

    在这里插入图片描述
    在这里插入图片描述

    主要加上标签 xm-select=“kcqytype”

    <div class="Y109_ItemInline">
    		<label class="Mkh_FormLabel">科创企业类型</label>
    		<div class="Mkh_FormDiv">
    			<form:select id="kcqytype" lay-filter="kcqytype"     xm-select="kcqytype"
    				path="kcqytype">
    				<option value="">请选择</option>
    				<form:options items="${kcqytype}"  />
    			</form:select>
    		</div>
    </div>
    

    js写法

    $(function(){
    	var formSelects = layui.formSelects;
    	//应用实例
    	formSelects.render('kcqytype');	
    	//回显
    	var kcqytype = new Array();
    	var kcqytypes = $("#hdn_kcqytype").val();
    	kcqytype = kcqytypes.split(",");
    	formSelects.value('kcqytype', kcqytype, true);
    	
    
    }) 
    
    展开全文
  • Layui 下拉框多选 —老司机首选 https://blog.csdn.net/YBaog/article/details/79933223
  • script src="../../lib/layui-v2.5.5/layui.js" th:src="@{/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script> <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.c...
  • layui的插件效果,优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,...
  • layui 下拉框 多选 及回显

    千次阅读 2020-07-21 15:45:31
    div class="layui-form-item layui-col-md4"> <label class="layui-form-label"><span class="layui-form-required">*</span>主营类目</label> <div class="layui-input-block">...
  • layui实现下拉框多选

    千次阅读 2020-07-28 18:55:26
    //引入formSelects.css ...script src="layui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //全局定义一次, 加载formSelects layui.config({ .
  • div class="layui-inline"> <select id="tabletype" name="tabletype" multiple="multiple" lay-filter="tabletypechange"> <option value="模型表">模型表</option> <option value
  • 首先layui下拉框多选原本框架是不带这个功能的,本来想实现这个功能打算用js原生实现,后来翻到layui第三方插件xm-select 下拉框多选数据结构 直接上源代码吧 不喜勿喷,第一次写博客,可能表达不好吧,不懂得可以...
  • LayUI # 多选下拉框

    千次阅读 2019-12-21 16:53:42
    我的项目中使用的是formSelects-v4.js,但是现在以及对此引用停止更新了。 现在提供一下学习网址:https://hnzzmsf.github.io/example/example_v4.html 目前使用的是xm-select ... 讲讲我是怎么使用的下拉框吧。...
  • 主要为大家详细介绍了layui实现下拉框三级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Layui 下拉框多选 —老司机首选

    万次阅读 热门讨论 2018-04-13 18:57:15
    需要加油的老司机快来看看吧!废话不都说,上车看代码! HTML 代码 div class="layui-form-item">...layui-form-label"...layui-unselect layui-form-select downpanel cs">
  • layui实现下拉框多选,取值及赋值

    万次阅读 热门讨论 2018-09-21 15:53:01
    首先需要的js及css,我是直接在官网上下载的 废话不多说,直接上代码 ...layui下拉框多选&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0&qu
  • layui多选下拉框

    2020-12-22 16:14:54
    想实现layui多选下拉框var select = $(this),title = reElem.find('.' + TITLE),input = title.find('input'),multiSelect = title.find(".multiSelect"),dl = reElem.find('dl:eq(0)'),dds = dl.find('div>...
  • 关于Layui的表格翻页多选,查看了官方的友人方法,发现不能解决顶部多选和行内最后一行选中的判断问题,进行了优化,有类似情况的可以拿去参考,有问题可以联系我
  • layui多选下拉框

    2021-07-23 11:00:25
    select> 导入js <script th:src="@{/js/multiSelect.js}" charset="utf-8"></script> 我使用时候 以上就可以实现多选下拉框的功能;我新增和修改页面用的同一个页面,但点击修改页面时,多选框变成了单选框,点击...
  • formSelects-v4 layui下拉框多选方案

    千次阅读 2019-08-06 09:49:27
    formSelects-v4.js 基于Layui多选解决方案 1、闲谈杂趣 v3传送门v3文档 其实思考了很久, 还是放弃了v3, 因为开发v3的时候很粗暴, 按照编程角度来看就是硬撸, 也怪自己实力有限, 所以反思了一下, 尝试着继续前行....
  • 动态赋值前 动态赋值后 多选效果没了 html <div class="layui-form-item"> <label class="layui-form-label">多选label> <div class="layui-input-block"> ...请选择option> <option value="1">1...
  • 需要引用的js 和css文件 <link href="~/Content/scripts/layui-formSelects/formSelects-v4...--多选下拉框HTML代码--> <div class="layui-form-item"> <div class="layui-inline"> <label cl
  • 今天要介绍的就是layui的form表单组件里的带查询的下拉框。 用任何插件都需要引用相应的css文件和js文件,在这就不多说了。但layui的form表单组件不仅要引用插件还需要加载相应的模块,少了这两步操作,select、...
  • DropDownList下拉框多选

    2012-05-03 15:44:01
    DropDownList下拉框多选
  • layui下拉多选

    千次阅读 2019-04-10 17:18:24
    1.去layui下载多选插件 ![](https://img-blog.csdnimg.cn/20190410171803776.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWxteWJhYnk=,size_16,...
  • layui表单的下拉选择框select禁止点击/禁用/不可操作的实现方法直接上代码: 行业类型选择行业类型it服务制造业批发/零售生活服务layui.use('form', function(){var form = layui.form;});可以直接 放到下拉选择框 ...
  • tp5后台下拉框多选

    2020-12-22 15:33:01
    1.https://fly.layui.com/extend/multiSelect/ 首先下载引入 后台添加 控制器: foreach ($selectResult as $key => $vo) { $course_type = Db::name('course_type c') ->join('type t','t.id=c.type_ids'...

空空如也

空空如也

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

layui下拉框多选