ajax子页面main_sub.html

最新推荐文章于 2021-06-15 14:08:28 发布

原创最新推荐文章于 2021-06-15 14:08:28 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

ajax页面异步处理的运用专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的选择器界面设计案例，该案例实现了从左侧选择框向右侧选择框拖拽选项的功能，并提供了确认按钮将选择结果回传给父窗口。此设计适用于配置界面或参数选择场景。

<!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角标对应的值赋值给opt
					opt.text=leftSelect.options[0].text;
					//右侧栏添加opt
					rightSelect.appendChild(opt);
					//移除左边第一个option
					leftSelect.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>