<!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").οnclick=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").οnclick=function(){
while (leftSelect.options.length>0) {
//向右添加左边第一个option的值
var opt =document.createElement("option");
//把左侧栏0角标对应的值赋值给opt
opt.text=leftSelect.options[0].text;
//右侧栏添加opt
rightSelect.appendChild(opt);
//移除左边第一个option
leftSelect.remove(0);
}
}
//向左选择一个或者多个
document.getElementById("btn2Left").οnclick=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="关闭" οnclick="window.close()">
</td>
</tr>
</table>
</body>
</html>
ajax子页面main_sub.html
最新推荐文章于 2021-08-06 01:18:07 发布