layui中開啟彈窗的動態下拉框選中
阿新 • • 發佈:2018-12-18
總結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(); } });
原則是先載入子頁面的下拉框的值查詢,然後在回撥到父方法裡去比對顯示