本文共 2833 字，大约阅读时间需要 9 分钟。

打开一个form页面，如下面的样子,看似没有什么问题，实则问题是form-group之间的间距没有了

通过F12调试发现，form的class不正确，出现了[object HTMLSelectElement]的样式

看看我的页面,form的样式有设置啊，那么问题在哪里呢?

<%@page contentType="text/html" pageEncoding="UTF-8"%><%@ include file="/WEB-INF/views/include/taglib.jsp"%><div class="container-fluid">	<form id="main-form" action="${ctx}/qrtzCronTriggers/${action}" class="form-horizontal margin-top">		<div class="form-group">			<label class="col-xs-3 text-right control-label">任务名称:</label>			<div class="col-xs-9">				<input type="text" class="form-control no-padding" id="name"					name="name" value="${scheduleJob.name}" required />			</div>		</div>		<div class="form-group">			<label class="col-xs-3 text-right control-label">任务组:</label>			<div class="col-xs-9">				<input type="text" class="form-control no-padding" id="group"					name="group" value="${scheduleJob.group}" required/>			</div>		</div>		<div class="form-group">			<label class="col-xs-3 text-right control-label">定时策略:</label>			<div class="col-xs-9">				<input type="text" class="form-control no-padding" id="cronExpression"					name="cronExpression" value="${scheduleJob.cronExpression}" required />			</div>		</div>		<div class="form-group">			<label class="col-xs-3 text-right control-label">任务类:</label>			<div class="col-xs-9">				<select class="form-control no-padding " name="className" id="className" data-value="${scheduleJob.className}" required>				</select>			</div>		</div>		<div class="form-group">			<label class="col-xs-3 text-right control-label">描述:</label>			<div class="col-xs-9">				<textarea id="description" class="form-control no-padding"					id="description" name="description" style="width: 100%; height: 100px;"					required>${scheduleJob.description}</textarea>			</div>		</div>	</form>	<footer class="footer">		<div class="btn-group-sm text-center">			<button class="btn btn-primary ladda-button" data-style="expand-left" data-size="1" type="button" id="btnSave" ><span class="ladda-label">保存</span></button>			<button class="btn btn-white" type="button" id="btnCancel">取消</button>		</div>	</footer></div>

排查页面简单的做法，就是删代码，找到问题代码,加上了下面的代码，就出现了这个问题。

<div class="form-group">			<label class="col-xs-3 text-right control-label">任务类:</label>			<div class="col-xs-9">				<select class="form-control no-padding " name="className" id="className" data-value="${scheduleJob.className}" required>				</select>			</div>		</div>

这代码有什么问题呢，貌似没任何问题。唯一猜测有问题的地方恐怕只有className的变量名问题。
我的页面打开方式如下，这里用到的是layer.js的打开弹出层的方式.应该是layer输出html的时候出了问题。我不想改layer.js的源码，只能更改换个名字，就ok了。

$.ajax({       		url:ctx+'/qrtzCronTriggers/add?t='+Math.random(),    		type:'get',    		async:false,    		success:function(htmlContent){       			var layero = layer.open({   type:1,title:'新增上传周期',shadeClose:false,shade:0.8,area:'500px',content:htmlContent});    			initFormConfig(layero);    		}    	});