解决layui隐藏域：不显示问题（含案例、代码、截图）
layui 隐藏域：不显示问题（案例篇）
- 自定义的隐藏域不显示？
- 只需要给隐藏域添加一个layui-input类名即可，其他不用改变。
案例 · 效果图：
代码示下：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>时间选择器-排版演示title>
<link rel="stylesheet" href="statics/plugin/layui/css/layui.css">
<link rel="stylesheet" href="statics/css/common.css">
<link rel="stylesheet" href="statics/css/member.css">
<style>
style>
head>
<body>
<div class="layui-container mgt20">
<p class="layui-font-red">form表单内部需要增加input隐藏域，用于接收按钮下拉组件传值。p>
<form class="layui-form" action="">
<div class="site-border-green">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend class="layui-font-green">时间选择器：范围选择legend>
fieldset>
div>
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">订单时间label>
<div class="layui-inline" id="test6">
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="test-startDate-1" class="layui-input" placeholder="开始日期" name="startdate">
div>
<div class="layui-form-mid">到div>
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="test-endDate-1" class="layui-input" placeholder="结束日期" name="enddate" >
div>
div>
div>
div>
div>
<div class="site-border-green">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend class="layui-font-green">下拉菜单legend>
fieldset>
div>
<div class="layui-btn-container">
<button class="layui-btn demo1">
<span>请选择消费类型span>
<i class="layui-icon layui-icon-down layui-font-12">i>
button>
<button class="layui-btn layui-btn-primary demo1">
<span>下拉菜单span>
<i class="layui-icon layui-icon-down layui-font-12">i>
button>
<button class="layui-btn layui-btn-primary demo1">
下拉菜单
<i class="layui-icon layui-icon-down layui-font-12">i>
button>
<style>
.blackbgclr-dropdown,
.blackbgclr-dropdown .layui-menu{background-color: #000; border: none;}
.blackbgclr-dropdown .layui-menu li{color: #fff;}
.blackbgclr-dropdown .layui-menu li:hover{background-color: #333;}
style>
div>
<div class="layui-inline" style="width: 235px;">
<input name="" placeholder="在输入框提供一些常用的选项" class="layui-input" id="demo2">
div>
<input type="hidden" id="type" name="type" placeholder="消费类型" class="layui-input">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">开始查询button>
<button type="reset" class="layui-btn layui-btn-primary">重置button>
form>
div>
<script src="statics/plugin/layui/layui.js">script>
<script>
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
//监听提交
form.on('submit(demo1)', function(data){
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
});
layui.use('laydate', function(){
var laydate = layui.laydate;
//日期范围
laydate.render({
elem: '#test6'
//设置开始日期、日期日期的 input 选择器
//数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
,range: ['#test-startDate-1', '#test-endDate-1']
});
});
layui.use(['dropdown', 'util', 'layer', 'table'], function(){
var dropdown = layui.dropdown
,util = layui.util
,layer = layui.layer
,table = layui.table
,$ = layui.jquery;
//初演示
dropdown.render({
elem: '.demo1'
,trigger: 'hover'//鼠标hover下拉菜单展开
,data: [{
title: '金钱'
,id: 100
},{
title: '积分'
,id: 101
},{
title: '金钱+积分'
,id: 102
}]
,className: 'blackbgclr-dropdown'//设置类名，绑定下拉菜单的背景等css样式设置
,click: function(obj){
this.elem.find('span').html(obj.title);//this.elem拼接使用原生js语法及其函数find()并操作子元素或文字等属性的取值
$('#type').val(obj.title);
layer.tips('点击了：'+ obj.title, this.elem, {tips: [1, '#5FB878']})
}
});
//初演示 - 绑定输入框
dropdown.render({
elem: '#demo2'
,style: 'width: 235px;'//设置DOM元素尺寸:width宽度
,data: [{
title: '科幻'
,id: 101
},{
title: '喜剧'
,id: 102
},{
title: '综艺'
,id: 103
},{
title: '动画'
,id: 104
},{
title: '悬疑'
,id: 105
},{
title: '惊悚'
,id: 106
}]
,click: function(obj){
this.elem.val(obj.title);
}
});
});
script>
body>
html>
重要代码提示：
<input type="hidden" id="type" name="type" placeholder="消费类型" class="layui-input">
以上就是关于“ layui 隐藏域：不显示问题（案例篇） ”的全部内容。