根据父窗口传入对象动态生成选项

主要实现功能:window.showModalDialog()方法打开一个子窗口,

并在子窗口中根据父窗口传入的对象动态生成选项供用户选择,

之后返回选择的值传回给父窗口。

 

子窗口主要代码:

<html > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTENT="0"> 
<title>选择需要查看的轨迹</title> 
<style type="text/css">

#form{
margin-left:50px;
font-family:"微软雅黑";
}
#h{
margin-top:10px;
}
</style>
</head>
<body onload="setItems()">
<h5 id="h"><b>该定单下有多条数据,请选择需要查看的轨迹:</b></h5>
<form id="form">
<select name="staffType" id="type" >
</select>
<input type="button" onclick="getType()" value="确定"></input>
<input type="button" onclick="window.close();" value="取消"></input>
</form> 
<script type="text/javascript">
function setItems(){
var tempObj = window.dialogArguments;
for(var i = 0;i<tempObj.length;i++){
var text = tempObj[i].type;
var obj=document.getElementById("type"); 
obj.options.add(new Option(text,i));
}
}
function getType(){
var obj = document.getElementById("type");
var index = obj.selectedIndex;
var value = obj.options[index].value;
window.returnValue=value;
window.close();
}
</script>
</body>

  

注意设置

<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 

即设置为不缓存页面,否则你作的修改不会即时作用于页面。

 

父窗口主要代码:

var staffType = 0;
			if (tempObj.length>1){
				
			 staffType = window.showModalDialog("type.htm",tempObj,'dialogwidth:300px;dialogheight:100px;help=no;status=no;center=yes;edge=raised;resizable=no;scroll:no;Minimize=no;Maximize=no');
			 
			}

  其中temObj是一个数组对象,如果该数组里面有大于两个或以上的值,就调用window.showModalDialog()方法。

window.showModalDialog()方法的使用请自行百度。staffType用于接收子窗口返回的值。拿到返回的值之后就可以做各种各样的坏事啦哈哈哈

posted @ 2015-03-27 15:43  煮烂饭城  阅读(237)  评论(0编辑  收藏  举报