精华内容
下载资源
问答
  • 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>
    ``
    
    
    
    展开全文
  • layui如何得到select下拉框选中的值?下面本篇文章介绍一下layui取得select...引用layui插件,取得下拉框的值模板:增加、修改学校/层次/专业{$rs1.title} >> {$rs.title}学费批次请选择批次{volist name="...

    layui如何得到select下拉框选中的值?下面本篇文章介绍一下layui取得select下拉框选中值的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    layui如何得到select下拉框选中的值?

    引用layui插件,取得下拉框的值

    模板:

    增加、修改学校/层次/专业

    {$rs1.title} >> {$rs.title}

    学费

    批次

    请选择批次

    {volist name="batch_rs" id="batch"}

    {$batch.title}

    {/volist}

    立即提交

    layui.use(['form', 'jquery'], function(){

    var form = layui.form

    ,$= layui.$;

    // var batch=$("#batch").val();

    form.on('select', function(data){

    console.log(data.elem); //得到select原始DOM对象

    console.log(data.value); //得到被选中的值]

    $("#batch").val(data.value)

    console.log(data.othis); //得到美化后的DOM对象

    });

    $('#editbatchschooltuition').on('click', function(){

    var batch=$("#batch").val();

    alert(batch);

    layer.ready(function(){

    layer.open({

    type: 2,

    title: '增加',

    maxmin: true,

    area: ['750px', '400px'],

    content: '{:url('main/addschool')}?id={$id}&price={$rs.price}&batch='+batch,

    //content: '{:url('main/addschool')}',

    cancel: function(){ //刷新网页

    }

    });

    });

    });

    });

    更多web前端知识,请查阅 HTML中文网 !!

    展开全文
  • layui得到select值的方法:首先打开相应的模板代码文件;然后引用layui插件;最后通过“var batch=$...推荐:《javascript基础教程》《layUI教程》layui得到select下拉框选中的值:引用layui插件,取得下拉框的值模板...

    layui得到select值的方法:首先打开相应的模板代码文件;然后引用layui插件;最后通过“var batch=$("#batch").val();”方法取得下拉框的值即可。

    876b7f1574b2351314daef2c8be79e16.png

    本教程操作环境:Windows7系统、layui2.4版,该方法适用于所有品牌电脑。

    推荐:《javascript基础教程》《layUI教程》

    layui得到select下拉框选中的值:

    引用layui插件,取得下拉框的值

    c7ab77680f174861f417cec8a8de10e5.png

    模板:

    增加、修改学校/层次/专业

    {$rs1.title} >> {$rs.title}

    学费

    批次

    请选择批次

    {volist name="batch_rs" id="batch"}

    {$batch.title}

    {/volist}

    立即提交

    layui.use(['form', 'jquery'], function(){

    var form = layui.form

    ,$= layui.$;

    // var batch=$("#batch").val();

    form.on('select', function(data){

    console.log(data.elem); //得到select原始DOM对象

    console.log(data.value); //得到被选中的值]

    $("#batch").val(data.value)

    console.log(data.othis); //得到美化后的DOM对象

    });

    $('#editbatchschooltuition').on('click', function(){

    var batch=$("#batch").val();

    alert(batch);

    layer.ready(function(){

    layer.open({

    type: 2,

    title: '增加',

    maxmin: true,

    area: ['750px', '400px'],

    content: '{:url('main/addschool')}?id={$id}&price={$rs.price}&batch='+batch,

    //content: '{:url('main/addschool')}',

    cancel: function(){ //刷新网页

    }

    });

    });

    });

    });

    5812ecf3fc96f3c5c50e77d8ca2cde6e.png

    展开全文
  • 前端组件(来自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);
    	
    
    }) 
    
    展开全文
  • Blockquote:块引用;Fieldset:字段集;1.所有浏览器都支持 标签。fieldset 元素可将表单内的相关元素分组。 标签将表单内容的一部分打包,生成一组相关表单的字段。当一组表单元素放到 标签内时,浏览器会以特殊方式...
  • layui 树状下拉框

    2020-07-31 11:50:40
    1、script引用 <script type="text/javascript" src="js/treeSelect.js"></script>; 2、layui.use加上“treeSelect”, 3、var treeSelect = layui.treeSelect 4、 function XMTr
  • 首先需要的js及css,可以直接在layui官网上下载:https://www.layui.com/相关引用: 增加如下测试html代码:城市●北京上海天津重庆获取配置select多选相关://全局定义一次, 加载formSelectslayui.config({base: ...
  • layui实现下拉框select多选,取值

    千次阅读 2020-04-24 10:33:33
    layui实现下拉框select多选,取值 首先需要的js及css,可以直接在layui官网上下载:https://www.layui.com/ 相关引用: <link href="~/layui-v2.5.4/layui/css/layui.css" rel="stylesheet" /> <...
  • 需要引用的js 和css文件 <link href="~/Content/scripts/layui-formSelects/formSelects-v4.css" rel="stylesheet" /> 留下qq,我私发 废话不说了,直接上代码 1.HTML代码 <!--多选下拉框HTML代码-...
  • 有时候可能会有需求,在vue的项目中...关键的是下面在index.html中直接引入layui.js,有很多博客说 ,要把layui对应的包放在static文件夹下,所以就直接放在了static下。另外,就是在使用的时候,在页面中会有如下...
  • 首先需要的js及css,可以直接在layui官网上下载:https://www.layui.com/相关引用:增加如下测试html代码:城市●北京上海天津重庆获取配置select多选相关://全局定义一次, 加载formSelectslayui.config({base: '...
  • &lt;link rel="...layui/css/layui.css"&gt;  &lt;form class="layui-form layui-form-pane" action=""&gt;  &lt;!-- 第一行 --&gt;  &
  • LayUI树形下拉框

    千次阅读 2020-08-21 10:55:42
    需要引用js 留下qq,我私发 1.Html <div class="layui-inline"> <label class="layui-form-label"><font color="red">*</font>题库</label> <div class="layui-input-...
  • LayUI # 多选下拉框

    2019-12-21 16:53:42
    我的项目中使用的是formSelects-v4.js,但是现在以及对此引用停止更新了。 现在提供一下学习网址:https://hnzzmsf.github.io/example/example_v4.html 目前使用的是xm-select 现在提供一下学习网址:...
  • layui 如何取得select下拉框选中的值

    万次阅读 热门讨论 2018-07-13 09:58:05
    引用layui插件,取得下拉框的值模板:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" ...
  • Blockquote:块引用;Fieldset:字段集; 1.所有浏览器都支持 <fieldset> 标签。 fieldset 元素可将表单内的相关元素分组。 <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。 当一组...
  • 1. 引用 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> <link href="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.css" rel="styles...
  • 今天要介绍的就是layui的form表单组件里的带查询的下拉框。 用任何插件都需要引用相应的css文件和js文件,在这就不多说了。但layui的form表单组件不仅要引用插件还需要加载相应的模块,少了这两步操作,select、...
  • 在使用layui框架的时候,经常会有很多插件的使用问题,比如说下拉框的省市区三级联动,因为项目的需求不同或者插件的的使用问题,经常会出现下拉框取不到值或者后台提交不上数据之类的问题,实在让人头疼。...
  •  在使用 layui 框架写 jsp 的时候,使用 ajax 传递数据来刷新表单,发现使用 ajax 引用外部的jquery 和 layui 自带的jquery中,可能是 $导致select 下拉框中的option 没法在layui中正常使用(即数据传过去了,但是...
  • 基于layui封装了一个地址选择器,地址数据采用weui的city-picker。因为项目很多都封装在common里面,所以该common只抽出showCity和getCity方法。一、用法1. html写法name和lay-filter必须保持统一,data-area是地址...
  • 最近写项目用到了layui框架,在写layui表单的时候发现下拉框没有渲染出来,如下两图对比:图一为下拉框缺失,图二是理想情况 一开始是以为自己下拉框class写错了,检查了并没有什么不对,于是把官方文档的form...
  • 引用文件如下: <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script> <link rel="stylesheet" href="css/layui.css"> <script type="text/javascript" src="layui.js">...
  • 疑问:为什么第一次进入页面是undefined?第二次点进页面的时候就不是的了,是layui的问题? 后来问别人,说可能是js的引用顺序问题还真是,我把自己的js放到最后就行了
  • layui得到select值的方法:首先打开相应的模板代码文件;然后引用layui插件;最后通过“var batch=$...layui得到select下拉框选中的值:引用layui插件,取得下拉框的值模板:增加、修改学校/层次/专业{$rs1.title} &...
  • input动态搜索下拉框

    2019-12-06 16:40:10
    环境 : 后台页面用的是layui.js 要求 :input动态搜索下拉框 引用插件 : <linkhref="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css"rel="stylesheet"/> <scriptsrc=...
  • layui多选框

    2018-07-12 14:04:00
    多选下拉框:http://sun.faysunshine.com/layui/formSelects-v4/example/example_v4.html 1.下载formSelects-v4.1 2.引用 <link href="../../Scripts/layui-v2.3.0/css/layui.css" rel="stylesheet" media=...
  • layui xm-select的使用

    2021-01-27 10:35:07
    1.引用js 2. <div>...一般在layui中,下拉框用xm-select 比较方便。 var handle_userArr0 =ltreedata(handle_userArr0, dbcode, "1", "handle_userArr0", "select_id0"); function ltreed

空空如也

空空如也

1 2
收藏数 36
精华内容 14
关键字:

layui下拉框引用