如何通过 增加按钮 和 删除按钮 来进行及时刷新页面？

就是动态SELECT的.
你指的是 左边到右边.或者 右边到左边?
呵呵.网上已经有N多例了.
CSDN早前就讨论过.
你搜索一下.
SELECT

解决方案 »

  1.   

    <HTML>
    <HEAD>
    </HEAD>
    <SCRIPT LANGUAGE=javascript>
    <!--
            function sel_dw_ondblclick() {
    if (document.form1.sel_dw.selectedIndex>=0) 
     {
     dwid_sel=document.form1.sel_dw.options(document.form1.sel_dw.selectedIndex).value;
     dwname_sel=document.form1.sel_dw.options(document.form1.sel_dw.selectedIndex).text;  option1=document.createElement("option");
     option1.text=dwname_sel;
     option1.value=dwid_sel;
    document.form1.selected_dw.add (option1);
    document.form1.sel_dw.remove(document.form1.sel_dw.selectedIndex);
    }
    } function selected_dw_ondblclick() {
    if(document.form1.selected_dw.selectedIndex>= 0) 
    {
     dwid_sel=document.form1.selected_dw.options(document.form1.selected_dw.selectedIndex).value;
     dwname_sel=document.form1.selected_dw.options(document.form1.selected_dw.selectedIndex).text;
     option1=document.createElement("option");
     option1.text=dwname_sel;
     option1.value=dwid_sel;
    document.form1.sel_dw .add (option1);
    document.form1.selected_dw.remove(document.form1.selected_dw.selectedIndex); }
    } function left_onclick() {
    var sel_ary =new Array();
    j=0;
    for(i=0;i<document.form1.selected_dw.length ;i++)
     {
       if(document.form1.selected_dw.options(i).selected)
      {
         dwid_sel=document.form1.selected_dw.options(i).value;
     dwname_sel=document.form1.selected_dw.options(i).text;  option1=document.createElement("option");
     option1.text=dwname_sel;
     option1.value=dwid_sel;
     document.form1.sel_dw.add (option1);
     sel_ary[j]=i;
     j++;
    }
     }
     
      for(i=j-1;i>-1;i--)
      {
       document.form1.selected_dw.remove(sel_ary[i]);
      }
    } function left_all_onclick() {
    var j=0;
    var option1;
    j=document.form1.selected_dw.length ;
    for (i = 0;  i <j; i++)
    {
    option1=document.createElement("option");
    option1.text=document.form1.selected_dw.options(i).text;
    option1.value=document.form1.selected_dw.options(i).value;
    document.form1.sel_dw.add(option1);
    }
    for (i = j-1;  i >=0; i--)
    { document.form1.selected_dw.remove(i);
    } } function right_onclick() {
    var sel_ary =new Array(); j=0;
    for(i=0;i<document.form1.sel_dw.length ;i++)
     {
       if(document.form1.sel_dw.options(i).selected)
      {
         dwid_sel=document.form1.sel_dw.options(i).value;
     dwname_sel=document.form1.sel_dw.options(i).text;  option1=document.createElement("option");
     option1.text=dwname_sel;
     option1.value=dwid_sel;
     document.form1.selected_dw.add (option1);
     sel_ary[j]=i;
     j++;
    }
     }
     
      for(i=j-1;i>-1;i--)
      {
       document.form1.sel_dw.remove(sel_ary[i]);
      }
    } function right_all_onclick() {
    var j=0;
    var option1;
    j=document.form1.sel_dw.length ;
    for (i = 0;  i <j; i++)
    {
    option1=document.createElement("option");
    option1.text=document.form1.sel_dw.options(i).text;
    option1.value=document.form1.sel_dw.options(i).value;
    document.form1.selected_dw.add(option1); }
    for (i = j-1;  i >=0; i--)
    {
    document.form1.sel_dw.remove(i);
    }
    }

    //-->
    </SCRIPT><BODY>
    <FORM action="zbset_dwztsel.asp" method=POST id=form1 name=form1>    <TABLE width="90%" align=center>
    <tr> 
    <td align=center  rowspan=2 colspan=3>
    <table width="85%" border="0" height="210">
    <tr>
    <td height="22" width="390">可选项目(双击选中)：</td>
    <td height="22" width="46">&nbsp;</td>
    <td height="22" width="390">已选项目(双击删除)：</td>
    </tr>
    <tr>
    <td rowspan="6" width="390">
    <SELECT id=sel_dw name=sel_dw style="COLOR: darkblue; HEIGHT: 160px; WIDTH: 390px" LANGUAGE=javascript ondblclick="return sel_dw_ondblclick()" multiple>
    <option vlaue=1>1</option>
    <option vlaue=2>2</option>
    <option vlaue=3>3</option>
    <option vlaue=4>4</option>
    <option vlaue=5>5</option>
    </SELECT>
    </td>
    <td width="46" height="24">&nbsp;</td>
    <td rowspan="6" width="390">
    <div align="left">
    <SELECT id=selected_dw name=selected_dw  style="COLOR: darkblue; HEIGHT: 160px; WIDTH: 390px" LANGUAGE=javascript ondblclick="return selected_dw_ondblclick()" multiple>
    </SELECT>
    </div>
    </td>
                </tr>
                <tr>
    <td width="46" height="19" >
    <div align="left">
    <input type="button" name="right" value="> " LANGUAGE=javascript onclick="return right_onclick()">
    </div>
    </td>
    </tr>
    <tr>
    <td width="46" height="19"> 
    <div align="left">
    <input type="button" name="right_all" value=">>" LANGUAGE=javascript onclick="return right_all_onclick()">
    </div>
    </td>
    </tr>
    <tr> 
    <td width="46" height="19">
    <div align="left">
    <input type="button" name="left" value="< " LANGUAGE=javascript onclick="return left_onclick()">
    </div>
    </td>
    </tr>
    <tr>
    <td width="46" height="19">
    <div align="left">
    <input type="button" name="left_all" value="<<" LANGUAGE=javascript onclick="return left_all_onclick()">
    </div>
    </td>
    </tr>
    <tr> 
                  <td width="46" height="6">&nbsp;</td>
                </tr>
              </table>
            <td> 
          </tr>
          <tr CLASS="BGCOLOR2"> 
            <td align=center  valign=top height="190">&nbsp;</td>
          </tr>
          <tr> 
            <td height="6">&nbsp;</td>      
          </tr> 
        </table>
    </div>
    </FORM>
    </BODY>
    </HTML>
      

  2.   

    <script  language="JavaScript">
    <!--  Begin
    var  delimiter  =  ":";
    function  MoveSelect  (MoveFrom,  MoveTo,  ToDo)  {
        var  SelectFrom  =  eval('document.main_form.'+MoveFrom);
        var  SelectTo  =  eval('document.main_form.'+MoveTo);
        var  SelectedIndex  =  SelectFrom.options.selectedIndex;
        var  container;
        if  (ToDo=='Add')  {
            container=eval('document.main_form.'+ToDo+MoveTo);
        }
        if  (ToDo=='Remove')  {
            container=eval('document.main_form.'+ToDo+MoveFrom);
        }
        if  (SelectedIndex  ==  -1)  {
            alert("请选择一个用户");
        }  else  {
            for  (i=0;  i<SelectFrom.options.length;  i++)  {
                if(SelectFrom.options[i].selected)  {
                    var  name  =  SelectFrom.options[i].text;
                    var  ID  =  SelectFrom.options[i].value;
                    var  len  =  SelectTo.options.length;
                    SelectFrom.options[i]  =  null;
                    SelectTo.options[len]=new  Option  (name,ID);
                    SelectTo.options[len].selected  =  true;
                    i=i-1;
                    if(ToDo=='Add'||ToDo=='Remove')  {
                        container.value=container.value+name+delimiter;
                        //container.value=container.value+ID+delimiter;
                    }
                }
            }
            }
            SetButton();
    }
    function  MoveOption(MoveMenu,ToDo)  {
    var  SelectMenu  =  eval('document.main_form.'+MoveMenu);
    if  (ToDo=='Up')  {
    for  (i=1;  i<SelectMenu.options.length;  i++)  {
    if(SelectMenu.options[i].selected)  {
    var  name  =  SelectMenu.options[i].text;
    var  ID  =  SelectMenu.options[i].value;
    SelectMenu.options[i].text  =  SelectMenu.options[i-1].text;
    SelectMenu.options[i].value  =  SelectMenu.options[i-1].value;
    SelectMenu.options[i-1].text  =  name;
    SelectMenu.options[i-1].value  =  ID;
    SelectMenu.options[i].selected  =  false;
    SelectMenu.options[i-1].selected  =  true;
    }
    }
    }
    else  if  (ToDo=='Down')  {
    for  (i=SelectMenu.options.length-2;  i>=0;  i--)  {
    if(SelectMenu.options[i].selected)  {
    var  name  =  SelectMenu.options[i].text;
    var  ID  =  SelectMenu.options[i].value;
    SelectMenu.options[i].text  =  SelectMenu.options[i+1].text;
    SelectMenu.options[i].value  =  SelectMenu.options[i+1].value;
    SelectMenu.options[i+1].text  =  name;
    SelectMenu.options[i+1].value  =  ID;
    SelectMenu.options[i].selected  =  false;
    SelectMenu.options[i+1].selected  =  true;
    }
    }
    }
                    SetButton();
    }
    function  SetOptions(doCheck)  {
    for  (j=0;  j<document.main_form.length;  j++)  {
    var  SelectMenu  =  eval('document.main_form.elements[j]');
    if  (SelectMenu.options)  {
    for  (i=0;  i<SelectMenu.options.length;  i++)  {
    SelectMenu.options[i].selected  =  doCheck
    }
    }
    }
    SetButton();
    }
    function  SetButton()  {
    var  doCheck  =  true;
    var  len  =  document.main_form.Employees.options.length;
    for  (i=0;  i<len;  i++)  {
    if(document.main_form.Employees.options[i].selected)  {
    doCheck  =  false;
    }
    }
    document.main_form.add_admin.disabled  =  doCheck;
    document.main_form.add_user.disabled  =  doCheck;
    doCheck  =  true;
    len  =  document.main_form.Users.options.length;
    for  (i=0;  i<len;  i++)  {
    if(document.main_form.Users.options[i].selected)  {
    doCheck  =  false;
    }
    }
    document.main_form.remove_user.disabled  =  doCheck;
    if  (doCheck||document.main_form.Users.options[0].selected)  {
    document.main_form.up_users.disabled  =  true;
    }
    else  {
    document.main_form.up_users.disabled  =  false;
    }
    if  (doCheck||document.main_form.Users.options[len-1].selected)  {
    document.main_form.down_users.disabled  =  true;
    }
    else  {
    document.main_form.down_users.disabled  =  false;
    }
    doCheck  =  true;
    len  =  document.main_form.Admins.options.length;
    for  (i=0;  i<len;  i++)  {
    if(document.main_form.Admins.options[i].selected)  {
    doCheck  =  false;
    }
    }
    document.main_form.remove_admin.disabled  =  doCheck;
    if  (doCheck||document.main_form.Admins.options[0].selected)  {
    document.main_form.up_admins.disabled  =  true;
    }
    else  {
    document.main_form.up_admins.disabled  =  false;
    }
    if  (doCheck||document.main_form.Admins.options[len-1].selected)  {
    document.main_form.down_admins.disabled  =  true;
    }
    else  {
    document.main_form.down_admins.disabled  =  false;
    }
    }
    function  CheckDuplicates  (AddListContainer,  RemoveListContainer)  {
            var  AddList  =  eval('document.main_form.'+AddListContainer);
            var  RemoveList  =  eval('document.main_form.'+RemoveListContainer);
            var  TempAddList  =  AddList.value;
            var  TempRemoveList  =  RemoveList.value;
            if  (TempAddList>''&&TempRemoveList>'')  {
            TempAddList  =  TempAddList.substring(0,TempAddList.length-1);
            TempRemoveList  =  TempRemoveList.substring(0,TempRemoveList.length-1);
            var  AddArray  =  TempAddList.split(delimiter);
            var  RemoveArray  =  TempRemoveList.split(delimiter);
            for  (i=0;  i<AddArray.length;  i++)  {
                for  (j=0;  j<RemoveArray.length;  j++)  {
                    if  (AddArray[i]==RemoveArray[j])  {
                        AddArray[i]='';
                        RemoveArray[j]='';
                        break;
                    }
                }
            }
            AddList.value='';
            for  (i=0;  i<AddArray.length;  i++)  {
                if  (AddArray[i]>'')  {
                    AddList.value  =  AddList.value  +  AddArray[i]  +  delimiter;
                }
            }
            RemoveList.value='';
            for  (i=0;  i<RemoveArray.length;  i++)  {
                if  (RemoveArray[i]>'')  {
                    RemoveList.value  =  RemoveList.value  +  RemoveArray[i]  +  delimiter;
                }
            }
            }
    }
    function  LockChanges()  {
            CheckDuplicates('AddAdmins','RemoveAdmins');
            CheckDuplicates('AddUsers','RemoveUsers');
    }
    //    End  -->
    </script>
      

  3.   

    接上：<table  align="center">
    <tr>
    <td>
    <form  name="main_form"  action  method="post">
    <input  type="hidden"  name="AddAdmins"  />
    <input  type="hidden"  name="RemoveAdmins"  />
    <input  type="hidden"  name="AddUsers"  />
    <input  type="hidden"  name="RemoveUsers"  />
    <div  align="center">
    <table  cellspacing="0"  cellpadding="5"  border="0">
    <tr>
    <td  valign="top"  align="middle"  rowspan="2">备选用户<br  />
    <select  multiple  size="12"  name="Employees"  onchange="SetButton();">
    <option>Employee_01</option>
    <option>Employee_02</option>
    <option>Employee_03</option>
    <option>Employee_04</option>
    <option>Employee_05</option>
    <option>Employee_06</option>
    <option>Employee_07</option>
    <option>Employee_08</option>
    <option>Employee_09</option>
    <option>Employee_10</option>
    </select>  </td>
    <td>
    <p  align="center">
    <input  onclick="MoveSelect('Employees','Admins','Add');"  type="button"  value="增加Admin  &gt;&gt;"  name="add_admin"  />
    </p>
    <p  align="center">
    <input  onclick="MoveOption('Admins','Up');"  type="button"  value="Up"  name="up_admins"  /><input  onclick="MoveOption('Admins','Down');"  type="button"  value="Down"  name="down_admins"  />
    </p>
    <p  align="center">
    <input  onclick="MoveSelect('Admins','Employees','Remove');"  type="button"  value="&lt;&lt;  删除Admin"  name="remove_admin"  />
    </p>
    </td>
    <td  valign="top"  align="middle">Administrators<br  />
    <select  multiple  size="5"  name="Admins"  onchange="SetButton();">
    <option>Admin_01</option>
    <option>Admin_02</option>
    <option>Admin_03</option>
    <option>Admin_04</option>
    <option>Admin_05</option>
    </select>  </td>
    </tr>
    <tr>
    <td>
    <p  align="center">
    <input  onclick="MoveSelect('Employees','Users','Add');"  type="button"  value="增加User  &gt;&gt;  "  name="add_user"  />
    </p>
    <p  align="center">
    <input  onclick="MoveOption('Users','Up');"  type="button"  value="Up"  name="up_users"  /><input  onclick="MoveOption('Users','Down');"  type="button"  value="Down"  name="down_users"  />
    </p>
    <p  align="center">
    <input  onclick="MoveSelect('Users','Employees','Remove');"  type="button"  value="  &lt;&lt;  删除User  "  name="remove_user"  />
    </p>
    </td>
    <td  valign="top"  align="middle">Users<br  />
    <select  multiple  size="5"  name="Users"  onchange="SetButton();">
    <option>User_01</option>
    <option>User_02</option>
    <option>User_03</option>
    <option>User_04</option>
    <option>User_05</option>
    </select>  </td>
    </tr>
    </table>
    </div>
    </form>
    </td>
    </tr>
    <tr>
    <td>
    <div  align="center">
    <input  onclick="SetOptions(true);"  type="button"  value="全选"  /><input  onclick="SetOptions(false);"  type="button"  value="全部取消"  /><br  />
    <input  onclick="LockChanges();"  type="button"  value="保存修改"  /></div>
    <br  />
    <div  align="center">
    <a  href="javascript:alert(document.main_form.AddAdmins.value);">
    查询增加的Admin</a>  <br  />
    <a  href="javascript:alert(document.main_form.RemoveAdmins.value);">
    查询删除的Admin</a>  <br  />
    <a  href="javascript:alert(document.main_form.AddUsers.value);">
    查询增加的User</a>  <br  />
    <a  href="javascript:alert(document.main_form.RemoveUsers.value);">
    查询删除的User</a>  </div>
    </td>
    </tr>
    <tr>
    <td></td>
    </tr>
    <tr>
    </tr>
    </table>