求多选的<select>元素与另一个多选的<select>元素相互移动选项的代码!!!!!!!!!!!!!!!!

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

http://fason.nease.net/samples/js/moveoptions.html
<table border=0 cellpadding=0 cellspacing=0><form name=meizz>
  <tr><td>
    <select id=list1 size=8 ondblclick="moveOption(this, this.form.list2)">
      <option value=A>aaaaaaaaaa
      <option value=B>bbbbbbbbbb
      <option value=C>cccccccccc
      <option value=D>dddddddddd
      <option value=E>eeeeeeeeee
      <option value=F>ffffffffff
      <option value=G>gggggggggg
      <option value=H>hhhhhhhhhh
    </select></td>
  <td width=40 align=center>
    <input name=add type=button value=">>>" onclick="moveOption(this.form.list1, this.form.list2)"><br><br>
    <input name=sub type=button value="<<<" onclick="moveOption(this.form.list2, this.form.list1)">
  </td><td>
    <select id=list2 size=8 ondblclick="moveOption(this, this.form.list1)">
    </select>
  </td></tr></form>
</table><script language="JavaScript"></script>
function move(fbox,tbox)//ÊµÏÖLISTÑ¡Ïî¶Ôµ÷
{
for(var i=0; i<fbox.options.length; i++) {
if(fbox.options[i].selected && fbox.options[i].value != "") {
for(var j=0;j<tbox.options.length;j++)
{
if(tbox.options[j].value==fbox.options[i].value){
alert("ÓÐÖØ¸´Ñ¡³µ£¬ÇëÖØÐÂÑ¡Ôñ£¡");
return false;
}
}
// Ôö¼ÓÏîÄ¿ÁÐ±íµ½ÓÒ²à
var no = new Option();
no.value = fbox.options[i].value;
no.text = fbox.options[i].text;
// no.selected=true;
tbox.options[tbox.options.length] = no; // Çå¿Õ×ó²àµÄÏîÄ¿ÁÐ±í
//fbox.options[i].value = "";
//fbox.options[i].text = "";
}
}
//BumpUp(fbox);
//SortD(tbox);
}function deloptions(fbox) {
for(var i=0; i<fbox.options.length; i++) {
// if(fbox.options[i].selected==false){
// alert("ÇëÏÈÑ¡ÔñÈËÔ±£¡");
// return false;
// }
if(fbox.options[i].selected && fbox.options[i].value != "") {
fbox.options[i].value = "";
fbox.options[i].text = "";
}
}
BumpUp(fbox);
//fbox.options[0].text="-Í¨ÖªÔ±¹¤-"
}// Çå³ý¿ÕµÄÏîÄ¿ÁÐ±í
function BumpUp(box) {
for(var i=0; i<box.options.length; i++) {
if(box.options[i].value == "") {
for(var j=i; j<box.options.length-1; j++) {
box.options[j].value = box.options[j+1].value
box.options[j].text = box.options[j+1].text
}
var ln = i
break
}
}
if(ln < box.options.length) {
box.options.length -= 1;
BumpUp(box);
}
}function SortD(box) {
var temp_opts = new Array()
var temp = new Object()
// µ÷ÓÃÁÙÊ±Êý×é
for(var i=0; i<box.options.length; i++) {
temp_opts[i] = box.options[i]
} //ÅÅÐò
for(var x=0; x<temp_opts.length-1; x++) {
for(var y=(x+1); y<temp_opts.length; y++) {
if(temp_opts[x].text > temp_opts[y].text) {
temp = temp_opts[x].text
temp_opts[x].text = temp_opts[y].text
temp_opts[y].text = temp
}
}
}
for(var i=0; i<box.options.length; i++) {
box.options[i].value = temp_opts[i].value
box.options[i].text = temp_opts[i].text
}
}function Select(box) {
for(var i=0; i<box.options.length; i++) {
box.options[i].selected = true;
}
}
</script>
<% Option Explicit %>
<HTML>
<HEAD>
<link type="text/css" rel="stylesheet" href="../css/main.css">
<TITLE>请选择人员</TITLE>
</HEAD>
<BODY>
<%
dim objID,opt'定义对象编号
objID=trim(Request("objID"))
opt=trim(Request("opt"))
dim conn, rs
set conn = server.CreateObject("ADODB.Connection")
conn.open strConn
conn.CursorLocation = 3set rs = conn.execute("exec getAll 'Department'")
%>
<TABLE width="400" border="1" align="center" cellPadding=0 cellSpacing=0 bordercolor="#FFFFFF">

  <TR align="center" bgcolor="lightblue">
    <TD><img src="../images/sysIco/3.gif" width="16" height="16">部门：</TD>
    <TD colspan="2"><img src="../images/sysIco/2.gif" width="16" height="16">成员：</TD>
    <TD><img src="../images/sysIco/1.gif" >人员列表：</TD>
  </TR>
    <TR>
    <TD colspan="4"> </TD>
  </TR>
<TR valign="top">
<TD align="center">
<SELECT id=S1  class="multiSel"   name=S1 onchange="change1(); ">
<OPTION value="" ></OPTION>
<%if rs.eof then
response.write "<script>alert('目前没有部门');window.close();</script>"
Response.End
else
do while not rs.eof%>
<OPTION value="<%=rs("departmentID")%>" ><%=rs("department")%></OPTION>
<%
rs.MoveNext
loop
end if
rs.close
%>
</SELECT> </TD>
<TD align="center">
<SELECT id=S2      class="multiSel" size=2    name=S2  >
</SELECT> </TD>
<TD align="center">
<INPUT  type=button value="全选" class="btn" title="全选" onclick="addAll();"><br>
<INPUT  type=button value=" >> " class="btn" title="添加" onclick="addOne();"><br>
<INPUT  type=button value=" << " class="btn" title="移出" onclick="delOne();"><br>
<INPUT  type=button value="全删" class="btn" title="全删" onclick="remove(S3);"><br>
<INPUT  type=button value="确定" class="btn" title="确定" onclick="OK();" ><br>
<INPUT  type=button value="取消" class="btn" title="取消" onclick="NO();" > </TD>
<TD align="center"><SELECT id=S3 class="multiSel" size=2 name=S3 >
</SELECT> </TD>
</TR>
<TR>
    <TD></TD>
    <TD></TD>
    <TD></TD>
    <TD></TD></TR>
</TABLE>
<%=opt%><br><%=objID%>  <%
Dim A1,A2,A3'人员ID和姓名，部门这三列
set rs = conn.execute("exec getAll 'Person'")
do while not rs.eof
A1=A1 & "," & rs("userID")'人员ID
A2=A2 & "," & chr(34) & rs("realName") & chr(34)  '人员姓名
A3=A3 & "," & rs("departmentID")'人员部门
rs.MoveNext
loop
rs.close
set rs = nothing
conn.close
set conn = nothing
'下面这些为了传递给客户端数组用的,一次加载的数据少的连动
A1=mid(A1,2)
A2=mid(A2,2)
A3=mid(A3,2)
%>
<SCRIPT >
//创建变量'人员ID和姓名，部门这三列
var opt="<%=opt%>" ;
var objID="<%=objID%>";
var A1 = new Array(<%=A1%>);//人员ID
var A2 = new Array(<%=A2%>);//人员名单
var A3 = new Array(<%=A3%>);//'部门
function change1()
{
if(S1.value!= "")
{ //移除2
remove(S2);
for(var i=0;i<A3.length;i++ )
{//如果部门ID是被选中的，加上人员编号和名字
if(A3[i]==parseInt(S1.value))
{
add(S2,A1[i],A2[i]);
}
}
}
}
function add(obj,v,t)
{
var ooo=document.createElement("<OPTION>");
ooo.value=v;
ooo.text=t;
obj.add(ooo);
}
function remove(obj)
{ var count=obj.options.length;
for(var i=0;i<count;i++)
{
obj.remove(0);
}
}
function addAll()
{
for(var i=0;i<S2.options.length;i++)
{
if(isExist(S2.options[i].value)!= true);
{
add(S3,S2.options[i].value,S2.options[i].text);
}
}
}
function isExist(x)
{
var flag=false;
for(var i=0;i<S3.options.length;i++)
{
if (parseInt(S3.options[i].value)==x)
{
flag=true;
break;
}
}
return flag;
}
function addOne()
{
if(isExist(S2.value)!=  true)
{
add(S3,S2.value,S2.options(S2.selectedIndex).text);
}
}
function delOne(){
if(S3.selectedIndex>=0)
{
  S3.remove(S3.selectedIndex);
}
}
function OK()
{
var peopleIDlist=new String("");
var peopleNamelist=new String("");
for(var i=0;i<S3.options.length;i++)
{
peopleIDlist=peopleIDlist + S3.options[i].value + ",";
peopleNamelist=peopleNamelist + S3.options[i].text + ",";
}
dialogArguments.document.getElementsByName(opt+'ID'+objID)[0].value=peopleIDlist.slice(0,peopleIDlist.length-1);
dialogArguments.document.getElementsByName(opt+objID)[0].value=peopleNamelist.slice(0,peopleNamelist.length-1);
dialogArguments.document.getElementsByName(opt+objID)[0].title=peopleNamelist.slice(0,peopleNamelist.length-1);
self.close();
}
function NO()
{
self.close;
}
function findSlibling(x)
{
//window.document.getElementsByName
}
function trim(x)
{}
</SCRIPT>

</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>移动下拉框－www.51windows.Net</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Description" CONTENT="Power by 51windows.Net">
</HEAD><BODY>

<table border=0 cellpadding=0 cellspacing=0><form name=meizz>
  <tr><td>
    <select id=list1 size=8 ondblclick="moveOption(this, this.form.list2)">
      <option value=A>aaaaaaaaaa
      <option value=B>bbbbbbbbbb
      <option value=C>cccccccccc
      <option value=D>dddddddddd
      <option value=E>eeeeeeeeee
      <option value=F>ffffffffff
      <option value=G>gggggggggg
      <option value=H>hhhhhhhhhh
    </select></td>
  <td width=40 align=center>
    <input name=add type=button value=">>>" onclick="moveOption(this.form.list1, this.form.list2)"><br><br>
    <input name=sub type=button value="<<<" onclick="moveOption(this.form.list2, this.form.list1)">
  </td><td>
    <select id=list2 size=8 ondblclick="moveOption(this, this.form.list1)">
    </select>
  </td></tr></form>
</table><script language="JavaScript"></script></BODY>
</HTML>