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')

最后再次查看源代码:

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

猜你喜欢