showModalDialog传值

项目中出现一个bug，就是在弹出框选择了部门的值以后，写入父页面，当在点击查找部门的按钮后，已经选择的值要带入到弹出框中。类似下面的情况。

    解决方案就是利用showModalDialog 与json进行传值

父页面在点击按钮调用下面的js方法。js代码

function updateVisibleDept() {
		 //获得部门ID和部门名称
		var visibleDeptIds= document.getElementById("userVisibleDeptIds").value;
		var deptNames =document.getElementById("userVisibleDeptNames").value;
		var obj = new Object();
		obj.deptId = visibleDeptIds;
		obj.deptName = deptNames;
		var url="../common/user_manage!showUserUpdateDeptPage.action";
		 
		
		var dataJson = window.showModalDialog(url,obj,"dialogWidth = 450px;dialogHeight =400px");
		var deptNames =$("userVisibleDeptNames");
		var deptIds =$("userVisibleDeptIds");
		if(dataJson != null ) {
			 
			deptNames.setValue(dataJson.dataName);
			deptIds.setValue(dataJson.dataId);	
			}

	}

弹出页面的js代码，在数据加载完成后显示

function afterWindowOnload() {
		var obj = window.dialogArguments ;
		 if(obj !=null) {
			 //得到拼接的deptId和名称
			 var deptIds = obj.deptId.replace(/(^\s*)|(\s*$)/g, "");
			 var deptNames = obj.deptName;
			 //获得select
			 var visbleDept = document.getElementById("selectedData");
			 //创建option
			 var opt = document.createElement('option');
			 
			 if(deptIds != "" && deptIds !=null) {
				 
				 if(deptIds.indexOf(",") == -1 ) {
					 //如果不包括","则说明只选择了一个部门 获得为空、空字符串
					 opt.setAttribute("value", deptIds);
					 opt.innerText = deptNames;
					 visbleDept.appendChild(opt); 
					  //移除已经选择的部门
					 fnRemoveItem(deptNames);
				 }else {
					var deptIdArray = deptIds.split(",");
					var deptNameArray = deptNames.split(",");
					
					visbleDept.options.length = deptIdArray.length;
					
					for(i=0 ; i<deptIdArray.length;i++) {
						visbleDept.options[i].text = deptNameArray[i];
						visbleDept.options[i].value = deptIdArray[i];
						fnRemoveItem(deptNameArray[i]);
					}
				 }
			 }
			
		 }
	}

//移除已经选过的部门
	function fnRemoveItem(strText)
    {
        var selTarget = document.getElementById("selectingData");
        for(var i=0;i<selTarget.options.length;i++)
           {
            if(selTarget.options[i].text == strText)
            {
              selTarget.remove(i);
              i = i - 1;//注意这一行
            }
         }
    } 

在选择部门点击确定以后，返回父页面并给父页面赋值

function getSelectedDept() {
		var dataJson = getSelectedData();
		window.returnValue = dataJson;
		closeWin();
	}

getSelectData();

// 得到选择的数据
	function getSelectedData() {
		var oRight = $("selectedData");
		var dataJson = {dataId:"", dataName:""};
		if(!hasOptions(oRight)) {
			return dataJson; 
		} 
		
		var dataId = "";
		var dataName = "";
		
		for (var i=0;i<oRight.options.length;i++) {
			if (dataId == "") {
				
				dataId = oRight.options[i].value;
				dataName = oRight.options[i].text;
			}
			else {
				dataId = dataId + "," + oRight.options[i].value;
				dataName = dataName + "," + oRight.options[i].text;
			}
		}
		
		dataJson.dataId = dataId;
		dataJson.dataName = dataName;
		
		return dataJson;	
	}

相应的select

 <select id="selectedData" name="selectedData" class="selectDept" onclick="unSelectData()" multiple style="width: 85%; height: 95%; overflow: auto;font-size: 18px;background-color: #CDD0FD"></select>

其中红色部分是父页面的值传递给弹出框，绿色部门则是弹出框的值返回给父页面。

图片中的解决方法也是利用该方法，只是因为过程比上面的更稍微复杂一些所以没有写出来 ，不过思路是一样的。