1. 程式人生 > >layui中開啟彈窗的動態下拉框選中

layui中開啟彈窗的動態下拉框選中

總結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();	
				}
			});

原則是先載入子頁面的下拉框的值查詢,然後在回撥到父方法裡去比對顯示