LayUI form select 下拉框不显示
小虾米
阅读:671
2021-03-31 13:45:59
评论:0
弹出层Form: layui的下拉框总是显示不出来
<!-- table 弹出层表单 -->
<script type="text/html" id="edit_form">
<div class="layui-col-md10" style="margin-left: 35px;margin-top: 20px">
<form class="layui-form layui-form-pane" lay-filter="edit_form" action="">
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" name="deliveryName" required lay-verify="required" placeholder="请输入物流公司名称"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">编码</label>
<div class="layui-input-block">
<input type="text" name="deliveryCode" required lay-verify="required" placeholder="请输入物流公司编码"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">优先级</label>
<div class="layui-input-block">
<select name="deliverySort" lay-filter="aihao">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
</div>
<div class="layui-form-item" style="margin-top: 20px">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</script>
不显示代码:
table.on('tool(transport)', function(obj){
var data = obj.data;
if(obj.event === 'add') {
layer.open({
type: 1,
title: '新增物流公司信息',
area: ['420px', '330px'],
content: $('#edit_form').html()
});
form.on('submit(formDemo)',function(messge){
console.log(messge.field);
console.log(obj.data);
var str={
"deliveryName":messge.field.deliveryName,
"deliveryCode":messge.field.deliveryCode,
"deliverySort":messge.field.deliverySort
};
$.ajax({
url:"/api/transport/insert",
type:"POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(str),
success:function (msg) {
console.log(msg);
// var returnCode = msg.returnValue//取得返回数据(Sting类型的字符串)的信息进行取值判断
if (msg) {
//layer.closeAll('loading');
//layer.load(2);
layer.msg("修成功", {icon: 6});
layer.closeAll();
// 加载层 - 风格
} else {
layer.msg("新增失败", {icon: 5});
}
}
})
return false;//阻止表单跳转,网页url不显示提交的参数。
})
}
});
显示代码:
table.on('tool(transport)', function(obj){
var data = obj.data;
if(obj.event === 'add') {
layer.open({
type: 1,
title: '新增物流公司信息',
area: ['420px', '330px'],
content: $('#edit_form').html()
});
form.render();
form.on('submit(formDemo)',function(messge){
console.log(messge.field);
console.log(obj.data);
var str={
"deliveryName":messge.field.deliveryName,
"deliveryCode":messge.field.deliveryCode,
"deliverySort":messge.field.deliverySort
};
$.ajax({
url:"/api/transport/insert",
type:"POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(str),
success:function (msg) {
console.log(msg);
// var returnCode = msg.returnValue//取得返回数据(Sting类型的字符串)的信息进行取值判断
if (msg) {
//layer.closeAll('loading');
//layer.load(2);
layer.msg("修成功", {icon: 6});
layer.closeAll();
// 加载层 - 风格
} else {
layer.msg("新增失败", {icon: 5});
}
}
})
return false;//阻止表单跳转,网页url不显示提交的参数。
})
}
});
核心代码:form 表单绑定相关事件之间,重新渲染表单:
form.render();
效果截图:
声明
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。