LayUI form select 下拉框不显示分析

访客 阅读:178 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.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号