layui渲染下拉框,设置下拉框,设置验证
<div class="layui-form-item">
<label for="department_id" class="layui-form-label">
<span class="x-red">*</span>部门
</label>
<div class="layui-input-block">
<select name="department_id" id="department_id" lay-filter="department_id" required lay-verify="required">
<option value="">--</option>
<c:forEach items="${department_li }" var="item">
<option value="${item.did }" <c:if test="${s.department_id eq item.did}">selected </c:if> >${item.dname }</option>
</c:forEach>
</select>
</div>
</div>
<div class="layui-form-item">
<label for="professional" class="layui-form-label">
<span class="x-red">*</span>科室
</label>
<div class="layui-input-block">
<select name="chamber_id" id="chamber_id" lay-filter="chamber_id" required lay-verify="required">
<option value="">--</option>
</select>
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn" type="submit" lay-submit lay-filter="formDemo">保存</button>
<button class="layui-btn" type="reset">重置</button>
</div>
关键代码:设置需要渲染的下拉框,用 lay-filter
id=“department_id” lay-filter=“department_id”
js代码如下:
layui.use(['form','layer'], function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
return true;
});
getChamber($('#department_id').val());
form.on('select(department_id)', function(data){
var department_id=(data.value);
getChamber(department_id);
});
function getChamber(department_id){
$("#chamber_id").html("");
form.render('select');
if($.trim(department_id).length==0)return;
$.ajax({
type: 'POST',
url : "${ctx}/chamber/selectByDid",
data : {
department_id : department_id
},
dataType: 'json',
success: function(data){
$.each(data, function(key, val) {
var option1 = $("<option>").val(val.cid).text(val.cname);
if("${s.chamber_id}"==val.cid)$(option1).attr('selected','selected');
$("#chamber_id").append(option1);
form.render('select');
});
}
});
}
});
Layui 监听 select 获取自定义属性值
form.on('select(doctor_id)', function(data){
var f= $(data.elem).find("option:selected").attr("data-f");
$('#money').val(f);
});