layui渲染下拉框,设置下拉框,设置验证,设置富文本编辑器
分类: Java 专栏: html+css layer+layui 标签: layui渲染下拉框 设置下拉框的选项
2020-10-12 00:04:22 1154浏览
layui渲染下拉框总结
layui渲染下拉框,设置下拉框,设置验证
id="department_id" lay-filter="department_id"
lay-submit lay-filter="formDemo"
<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>
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);
});
设置富文本编辑器
<div class="layui-form-item layui-form-text">
<label for="past_medical_history" class="layui-form-label">
<span class="x-red"></span>既往史
</label>
<div class="layui-input-block">
<textarea id="context" name="past_medical_history" class="layui-textarea">${patient.past_medical_history }</textarea>
</div>
</div>
layui.use('layedit', function(){
layedit = layui.layedit;
index= layedit.build('context', {
tool: [
'strong' //加粗
,'italic' //斜体
,'underline' //下划线
,'del' //删除线
,'|' //分割线
,'left' //左对齐
,'center' //居中对齐
,'right' //右对齐
,'link' //超链接
,'unlink' //清除链接
]
});
});
好博客就要一起分享哦!分享海报
他的专栏
他感兴趣的技术