以前做了个公司的后台管理系统，用VS2003开发的，用的全部都是服务器控制。，每做一个操作就要刷新页面，虽然是公司自己内部用的但，还是有好多同事反应“用户体验”不好，所以前两天我把他做成了全静态的。主要是javascript对select 和option的操作。因为js功力有限，所以只能做的这样子了
页面效果：
前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="javascripttest.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script src="JScript1.js" type="text/javascript"></script>
<style type="text/css">
.style1
{
width: 63px;
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="1" align="center" style="width: 349px">
<tr>
<td>
<div style="text-align: right">
直属主管：
</div>
</td>
<td colspan="2">
<div id="divobj">
</div>
</td>
</tr>
<tr>
<td width="69">
<select size="4" name="listprojMag" id="listprojMag" style="height: 175px; width: 134px;">
<option value="10273">大包</option>
<option value="10282">大倩</option>
<option value="10243">和平</option>
<option value="10255">张三</option>
<option value="10261">方博</option>
<option value="10257">李四</option>
<option value="10087">阿坚</option>
</select>
</td>
<td class="style1">
<input id="btnAllAdd" type="button" value="全部加入" onclick="AllAdd();" />
<input type="button" id="btnadd" value="加入" onclick="funAdd();" />
<input id="btnDel" type="button" value="移除" onclick="funDelete();" />
<input id="btnDel0" type="button" value="全部移除" onclick="AllDelete();" />
<td width="69">
<select size="4" name="listFact" id="listFact" style="height: 175px; width: 131px;">
<option value="10104">kay</option>
<option value="10103">李秀贤</option>
</select>
</td>
</td>
</tr>
<tr>
<td colspan="3">
<div align="center">
<input id="Button1" type="button" value="确定" onclick="Submit();" />
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
JScript1.js文件：
//加入
function funAdd()
{
var objLeft=document.getElementById("listprojMag");
var objRight =document.getElementById("listFact");
for(var i=0;i<objLeft.length;i++)
{
if(objLeft[i].selected==true)
{
var oOption =new Option(objLeft[i].text,objLeft[i].value);
objRight.options[objRight.length]=oOption;
objLeft.options.remove(objLeft.selectedIndex);
}
}
}
//移除
function funDelete()
{
var objLeft=document.getElementById("listprojMag");
var objRight =document.getElementById("listFact");
for(var i=0;i<objRight.length;i++)
{
if(objRight[i].selected==true)
{
var oOption =new Option(objRight[i].text,objRight[i].value);
objLeft.options[objLeft.length]=oOption;
objRight.options.remove(objRight.selectedIndex);
}
}
}
//全部移除
function AllDelete()
{
var objLeft=document.getElementById("listprojMag");
var objRight =document.getElementById("listFact");
for(var i=0;i<objRight.length;i++)
{
var oOption =new Option(objRight[i].text,objRight[i].value);
objLeft.options[objLeft.length]=oOption;
}
objRight.innerHTML="";
}
//全部加入
function AllAdd()
{
var objLeft=document.getElementById("listprojMag");
var objRight =document.getElementById("listFact");
for(var i=0;i<objLeft.length;i++)
{
var oOption =new Option(objLeft[i].text,objLeft[i].value);
objRight.options[objRight.length]=oOption;
}
objLeft.innerHTML="";
}
//提交
function Submit()
{
var divobj =document.getElementById("divobj");
var objLeft=document.getElementById("listprojMag");
var objRight =document.getElementById("listFact");
var str ="";
for(var i=0;i<objRight.length;i++)
{
str+=objRight[i].text+"，";
}
str=str.substring(0,str.length-1);
divobj.innerHTML =str;
}
