总结layui.open弹窗中有动态下拉框无法得到所选的值
1.在父页面中加载js
如下:
/** eachSelect("id",value,body);
* 下拉菜单选中
* @param id select的id
* @param val 选中的值
* @param body 弹出层body
*/
function eachSelect(id, val,body) {
var selVal="";
// 0、设置select的值
body.find("#" + id).attr("value", val);
body.find("#" + id).children("option").each(function() {
if ($(this).val() == val) {
selVal=$(this).text()
$(this).attr("selected", "selected");
} else {
if ($(this).attr("selected") == "selected") {
$(this).removeAttr("selected");
}
}
});
// 1、首先设置输框
body.find("#" + id).siblings("div[class='layui-unselect layui-form-select']")
.children("div[class='layui-select-title']").children("input").val(
selVal);
body.find("#" + id).siblings("div[class='layui-unselect layui-form-select']")
.children("dl").children("dd").each(function() {
if ($(this).val() == val) {
if (!$(this).hasClass("layui-this")) {
$(this).addClass("layui-this");
$(this).click();
}
return true;
} else {
if ($(this).hasClass("layui-this")) {
$(this).removeClass("layui-this");
}
}
});
}
2.在弹出的子页面所写的js要用下面的包起来,才会执行在父页面方法之前
$(function(){
$.ajax({
method:"post",
url:rootPath+"th.do",
async:false,
success:function(nation){
var str = '' ;
for(var k in nation){
str += '<option value="'+nation[k].name+'">'+nation[k].name+'</option>';
}
$(".nt").html(str);
form.render('select');
},
error:function(errorData){console.log(errorData);}
});
})
3.下拉框渲染完在子方法中使用 form.render(‘select’);重新渲染
4.在父页面的js中
layer.open({
title : [ '打开子页面', 'font-size:18px;' ],
type : 2,
shadeClose : false,
closeBtn: 0,
maxmin : false, //开启最大化最小化按钮 nat
scrollbar: true ,//屏蔽浏览器滚动条
content : root+"htm.do",
success : function(layero, index) {
var body = layer.getChildFrame('body', index);
eachSelect("nation", data.nation,body);
layui.form.render();
}
});
原则是先加载子页面的下拉框的值查询,然后在回调到父方法里去比对显示