layui利用jQuery设置下拉列表的值

  

  今天在利用jQuery动态设置下拉列表的值的时候确怎么也赋值不上去,其中用到了layui框架,源代码如下:

复制代码
    $.post(contextPath+'/courseLibrary/getCourseBaseInfoById.do',{"courseId":courseId},function (courseInfoBack) {
        // initSelectValue("[name='courseplatform']",courseInfoBack.courseplatform);
        $("[name='courseid']").val(courseInfoBack.courseid);//向隐藏的课程主键赋值
        $("[name='coursenum']").val(courseInfoBack.coursenum);
        $("[name='courseplatform'] option[value='"+courseInfoBack.courseplatform+"']").attr("selected","true");
        $("[name='coursenamecn']").val(courseInfoBack.coursenamecn);
        $("[name='coursenameen']").val(courseInfoBack.coursenameen);
        $("[name='coursenature'] option[value='"+courseInfoBack.coursenature+"']").attr("selected","true");
        $("[name='credit']").val(courseInfoBack.credit);
        $("[name='coursehour']").val(courseInfoBack.coursehour);
        $("[name='teachhour']").val(courseInfoBack.teachhour);
        $("[name='experimenthour']").val(courseInfoBack.experimenthour);
        $("[name='computerhour']").val(courseInfoBack.computerhour);
        $("[name='practicehour']").val(courseInfoBack.practicehour);
        $("[name='weeklyhour']").val(courseInfoBack.weeklyhour);
        $("[name='coursehourmethod'] option[value='"+courseInfoBack.coursehourmethod+"']").attr("selected","true");
        $("[name='scoringway'] option[value='"+courseInfoBack.scoringway+"']").attr("selected","true");
    },'json')
复制代码

 

 

  后来查看页面源码发现option确实多了selected属性,可是由于使用了layui,layui将selected包装为dl与dd,所以我们看到的会失效:

 

 

 

解决办法:(更新渲染)

  layui的 Form模块的自动化渲染是会对其失效的。虽然我们没有双向绑定机制, 但没有关系,你只需要执行 form.render(type, filter); 方法即可。

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

参数(type)值描述
select 刷新select选择框渲染
checkbox 刷新checkbox复选框(含开关)渲染
radio 刷新radio单选框框渲染
form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
//……

 

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

复制代码
【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 状态
//……
复制代码

 

 参考:http://www.layui.com/doc/modules/form.html#render

 

 

 

 

 

 因此上述代码改为:

复制代码
    $.post(contextPath+'/courseLibrary/getCourseBaseInfoById.do',{"courseId":courseId},function (courseInfoBack) {
        // initSelectValue("[name='courseplatform']",courseInfoBack.courseplatform);
        $("[name='courseid']").val(courseInfoBack.courseid);//向隐藏的课程主键赋值
        $("[name='coursenum']").val(courseInfoBack.coursenum);
        $("[name='courseplatform'] option[value='"+courseInfoBack.courseplatform+"']").attr("selected","true");
        $("[name='coursenamecn']").val(courseInfoBack.coursenamecn);
        $("[name='coursenameen']").val(courseInfoBack.coursenameen);
        $("[name='coursenature'] option[value='"+courseInfoBack.coursenature+"']").attr("selected","true");
        $("[name='credit']").val(courseInfoBack.credit);
        $("[name='coursehour']").val(courseInfoBack.coursehour);
        $("[name='teachhour']").val(courseInfoBack.teachhour);
        $("[name='experimenthour']").val(courseInfoBack.experimenthour);
        $("[name='computerhour']").val(courseInfoBack.computerhour);
        $("[name='practicehour']").val(courseInfoBack.practicehour);
        $("[name='weeklyhour']").val(courseInfoBack.weeklyhour);
        $("[name='coursehourmethod'] option[value='"+courseInfoBack.coursehourmethod+"']").attr("selected","true");
        $("[name='scoringway'] option[value='"+courseInfoBack.scoringway+"']").attr("selected","true");
        layui.use(['form'], function () {
            $ = layui.jquery;
            var form = layui.form;
            form.render(); //刷新select选择框渲染
        });

    },'json')
复制代码

 

 

 最后再次查看源代码:

 

posted @   QiaoZhi  阅读(15034)  评论(0编辑  收藏  举报
编辑推荐:
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek:免费 AI 助力你的知识管理,让你的笔记飞起来!
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示