实现效果如下所示:
image.png
弹窗代码
layer.open({
type: 1,
title: ['填空题添加'],
skin: 'layui-layer-molv',
area: '550px',
offset: 'auto',
content: '<div class="layui-row" id="test" style="margin-top:10px;">' +
' <div class="layui-col-md10">' +
' <form class="layui-form">' +
' <div class="layui-form-item">\n' +
' <label class="layui-form-label" style="padding-left:-50px;">填空题题目:</label>\n' +
' <div class="layui-input-block">\n' +
' <input type="text" placeholder="请输入课程名" name="text" id="text" class="layui-input">\n' +
' </div>\n' +
' </div>\n' +
' <div class="layui-form-item">\n' +
' <label class="layui-form-label" style="padding-left:-50px;">答案:</label>\n' +
' <div class="layui-input-block">\n' +
' <input type="text" name="answer" id="answer" class="layui-input">\n' +
' </div>\n' +
' </div>\n' +
'<div class="layui-form-item">\n' +
' <label class="layui-form-label">课程名:</label>\n' +
' <div class="layui-input-block" id="course">\n' +
' </div>\n' +
' </div>'+
' <div class="layui-form-item">\n' +
' <label class="layui-form-label" style="padding-left:-50px;">难度:</label>\n' +
' <div class="layui-input-block">\n' +
' <input type="text" placeholder="请输入题目难度" name="level" id="level" class="layui-input">\n' +
' </div>\n' +
' </div>\n' +
'<div class="layui-form-item">\n' +
' <label class="layui-form-label">请选择题目类型:</label>\n' +
' <div class="layui-input-block" id="type">\n' +
' </div>\n' +
' </div>'+
' <div class="layui-form-item">\n' +
' <label class="layui-form-label" style="padding-left:-50px;">知识点:</label>\n' +
' <div class="layui-input-block">\n' +
' <input type="text" placeholder="请输入知识点" name="knowledge" id="knowledge" class="layui-input">\n' +
' </div>\n' +
' </div>\n' +
' </form>\n' +
' </div>\n' +
'</div>\n',
btn: ['提交', '取消']
, success: function(layero) {
var forms = layui.form;
$("#course").append(loadCourseList())
forms.render('select');
layero.find('.layui-layer-btn').css('text-align', 'center');
}
//确认
btn1: function(index) {
},
// 取消
btn2: function(index, layero) {
layer.close(index);
}
});
动态加载下拉框代码
//加载课程列表
function loadCourseList(){
var selectStr = "<select name=\"courseId\" >";
$.ajax({
url:ctx+'/course/getCourseList',
dataType:'json',
type:'get',
async:false,
success:function (data) {
for(var i = 0 ;i<data.length;i++){
var node = ('<option value="'+data[i].courseId+'">'+data[i].courseName+'</option>');
selectStr+=node;
}
}
})
return selectStr+"</select>";
}
关键代码:
var forms = layui.form;
$("#course").append(loadCourseList())
forms.render('select');
网友评论