layUI利用JQuery设置select下拉列表的值重新渲染-手赚鸭

layUI利用JQuery设置select下拉列表的值重新渲染

问题：选择框联动，需要根据第一个选择框的值来确定第二个选择框的选项，JQuery操作后无反应，找到问题解决文案是需要重新渲染！

官方文档：

更新渲染

有些时候，你的有些表单元素可能是动态插入的。这时 form 模块的自动化渲染是会对其失效的。虽然我们没有双向绑定机制（因为我们叫经典模块化框架，偷笑.gif）但没有关系，你只需要执行form.render(type, filter); 方法即可。

第一个参数：type，为表单的 type 类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表：

参数（type）值	描述
select	刷新select选择框渲染
checkbox	刷新checkbox复选框（含开关）渲染
radio	刷新radio单选框框渲染

例子layui.code

form.render(); //更新全部
form.render('select'); //刷新select选择框渲染

第二个参数：filter，为class="layui-form" 所在元素的lay-filter="" 的值。你可以借助该参数，对表单完成局部更新。

例子layui.code

【Html】
<div class="layui-form" lay-filter="test1">
…
</div>

<div class="layui-form" lay-filter="test2">
…
</div>

【JavaScript】
form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态

  <div class="layui-form-item">
        <div class="layui-input-block" style="width: 80%">
            <div class="layui-input-inline">
                <select  name="courseId" id="courseId" lay-filter="couresId">
                    <option value="">请选择课程</option>
                 <#if courses??>
                     <#list courses as item>
                    <option value="${item.id}">${item.courseName}</option>
                     </#list>
                 </#if>
                </select>
            </div>
            <div class="layui-form layui-input-inline" lay-filter="chapterRender">
                <select  name="chapterId" id="chapterId">
                    <option value="">请选择章节</option>
                </select>
            </div>
        </div>
    </div>

form.on('select(couresId)', function(data){
            console.log(data.value); //得到被选中的值
            $.post("${base}/admin/chapter/courses/"+data.value,function (res) {
                if(res.success){
                    var content = '<option value="">请选择章节</option>';
                    $.each(res.data,function (i,val) {
                        // console.log(i + "-" + val.chapterName);
                        content += '<option value="' + i + '">' + val.chapterName + '</option>';
                    });
                    console.log(content);
                    var s = $('#chapterId');
                    s.html(content);
                    console.log(s.html());
                    form.render('select','chapterRender');///重新渲染select#chapterId
                }else{
                    layer.msg(res.message);
                }
    });