Layui如何动态加载下拉框

2019-11-15  本文已影响0人  HeloWxl

实现效果如下所示:


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');
上一篇 下一篇

猜你喜欢

热点阅读