bug宝典之bootstrap [object HTMLSelectElement]

打开一个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);
}
});