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

2022年6月27日09:14:29

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

官方文档:

更新渲染

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

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

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

例子layui.code

  1. form.render(); //更新全部
  2. 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);
                }
    });

  • 作者:进修的CODER
  • 原文链接:https://feichen.blog.csdn.net/article/details/85254715
    更新时间:2022年6月27日09:14:29 ,共 1699 字。