ajax子页面main_sub.html

来源：互联网发布：网络u盾讀取服务器编辑：程序博客网时间：2024/06/09 01:21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>ModalDialog</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript">//父窗口var parentWindow;if (window.opener==undefined) {//支持ie浏览器进入parentWindow=window.dialogArguments;}else {//谷歌浏览器打开parentWindow=window.opener.parent;}window.onload = function() {//获取左右两侧的下拉列表var leftSelect = document.getElementById("leftSelect");var rightSelect = document.getElementById("rightSelect");//在窗体加载的时候：1、获取父页面的span文件内容//2、遍历左侧选项，选中了就判断（左侧删除，右侧添加）var spanHtml =parentWindow.document.getElementsByTagName("span")[0].innerHTML;//js里面是弱类型，按逗号切割自动封装成数组spanHtml =spanHtml.split(",");for (var i = 0; i < spanHtml.length; i++) {var str =spanHtml[i];//遍历左侧选项for (var j = 0; j < leftSelect.options.length; j++) {var text =leftSelect.options[j].text;//判断父页面显示的与子页面左侧栏的内容，如果相同，删除左侧栏里面相同的if (str == text) {//右侧添加、左侧删除var opt =document.createElement("option");//右侧创建一个下拉选项，内容跟和text一样，等于是移到右侧，把左侧删除opt.text =text;rightSelect.appendChild(opt);leftSelect.remove(j);break;}}}//向右选择一个或者多个document.getElementById("btn2Right").onclick=function(){var index = leftSelect.selectedIndex;//获取选中的下拉列表的下标//循环  只能用while ，用for循环角标会随时变//不等于-1说明有选中while(leftSelect.selectedIndex!=-1){//有选择就可以添加到右侧var opt =document.createElement("option");//opt的内容就是左侧栏选中的角标的值opt.text =leftSelect.options[leftSelect.selectedIndex].text;rightSelect.appendChild(opt);//移过去之后，删除左侧栏的选项leftSelect.remove(leftSelect.selectedIndex);}}//向右选择全部document.getElementById("btn2AllRight").onclick=function(){while (leftSelect.options.length>0) {//向右添加左边第一个option的值var opt =document.createElement("option");//把左侧栏0角标对应的值赋值给optopt.text=leftSelect.options[0].text;//右侧栏添加optrightSelect.appendChild(opt);//移除左边第一个optionleftSelect.remove(0);}}//向左选择一个或者多个document.getElementById("btn2Left").onclick=function(){//右侧删除，左侧添加if (rightSelect.options.length!=-1) {var opt =document.createElement("option");opt.text=rightSelect.options[rightSelect.selectedIndex].text;leftSelect.appendChild(opt);rightSelect.remove(rightSelect.selectedIndex);}}//向左选择全部document.getElementById("btn2AllLeft").onclick = function() {while (rightSelect.options.length>0) {var opt = document.createElement("option");opt.text = rightSelect.options[0].text;leftSelect.appendChild(opt);rightSelect.remove(0);}}//点击确认，右侧列表项的文本内容回填到父窗口的span中document.getElementById("btnConfirm").onclick = function(){//存储右侧列表项的文本内容var str = "";for (var i=0; i<rightSelect.options.length; i++) {str += rightSelect.options[i].text + ",";}//去掉最后一个逗号str = str.substring(0,str.length-1);//通过父窗口，获取子窗口中span元素，设置值 即右侧列表的选项parentWindow.document.getElementsByTagName("span")[0].innerHTML = str;//关闭当前窗口window.close();}}</script>  </head>    <body>    <table width="100%">    <tr>    <td width="40%" align="center">    <select style="width:70%;" id="leftSelect" multiple="multiple" size="12">    <option>Java - EE 学科</option>    <option>Java - Android 学科</option>    <option>C 学科</option>    <option>C++ 学科</option>    <option>IOS 学科</option>    <option>.Net 学科</option>    <option>PHP 学科</option>    <option>网页平面 学科</option>    </select>    </td>    <td align="center">    <input type="button" id="btn2Right" value=">"><br><br>    <input type="button" id="btn2AllRight" value=">>"><br><br><br>    <input type="button" id="btn2Left" value="<"><br><br>    <input type="button" id="btn2AllLeft" value="<<">    </td>    <td width="40%" align="center">    <select style="width:70%;" id="rightSelect" multiple="multiple" size="12">    </select>    </td>    </tr>    <tr>    <td colspan="3" height="10px"></td>    </tr>    <tr>    <td colspan="3" align="center">    <input type="button" id="btnConfirm" value="确定">       <input type="button" value="关闭" onclick="window.close()">    </td>    </tr>    </table>  </body></html>
0 0