Today, when I use jQuery to dynamically set the value of the drop-down list, I can't assign any value. The layui framework is used. The source code is as follows:
$.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')
Later, looking at the page source code, I found that option does have more selected attributes, but because layui is used, layui wraps selected as dl and dd, so what we see will be invalid:
Workaround: (update rendering)
The automatic rendering of layui's Form module will invalidate it. Although we don't have a two-way binding mechanism, it doesn't matter, you just need to execute the form.render(type, filter); method.
The first parameter: type, which is the type of the form, optional. By default, all types of forms are updated once. The types that can be partially refreshed are as follows:
| parameter (type) value | describe |
|---|---|
| select | Refresh the select select box rendering |
| checkbox | Refresh checkbox checkbox (with switch) rendering |
| radio | Refresh radio radio box rendering |
form.render(); // Update all form.render('select'); // Refresh the rendering of the select selection box // …
The second parameter: filter, which is the value of lay-filter="" of the element where class="layui-form" is located . You can use this parameter to complete partial updates to the form.
【HTML】 <div class="layui-form" lay-filter="test1"> … </div> <div class="layui-form" lay-filter="test2"> … </div> 【JavaScript】 form.render( null , 'test1'); // update all form states in the container where lay-filter="test1" is located form.render('select', 'test2'); // update lay-filter="test2 "All select states in the container // …
Reference: http://www.layui.com/doc/modules/form.html#render
So the above code is changed to:
$.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(); //Refresh the rendering of the select selection box
});
},'json')
Finally look at the source code again:
