根据父窗口传入对象动态生成选项
主要实现功能: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用于接收子窗口返回的值。拿到返回的值之后就可以做各种各样的坏事啦哈哈哈