option例子

 

<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;
    //alert(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){
          //alert(SelectFrom.options.length +"/"+ i);
         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)
       {
        //alert(i);
        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
      //alert(SelectMenu.options[0].text)
   }
  }
 }
 /*
 alert(main_form.length);
 for (i=0;i<main_form.length;i++){
  alert(i+"is"+document.main_form.elements[i].name+"is"+document.main_form.elements[i].length);
 }
 */
 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)
 {
  //alert(document.main_form.Admins.options.length);
  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>
<html>
<head>
<title>option例子﹗</title>
</head>
<body>
<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" οnchange="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 οnclick="MoveSelect('Employees','Admins','Add');" type="button" value="增加Admin &gt;&gt;" name="add_admin"/>
        </p>
        <p  align="center">
         <input οnclick="MoveOption('Admins','Up');" type="button" value="Up" name="up_admins"/>
         <input οnclick="MoveOption('Admins','Down');" type="button" value="Down" name="down_admins"/>
        </p>
        <p  align="center">
         <input οnclick="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" οnchange="SetButton();">
         <option value="a1">Admin_01</option>
         <option value="a2">Admin_02</option>
         <option value="a3">Admin_03</option>
         <option value="a4">Admin_04</option>
         <option value="a5">Admin_05</option>
        </select> 
       </td>
      </tr>
      <tr>
       <td>
        <p align="center">
         <input οnclick="MoveSelect('Employees','Users','Add');" type="button" value="增加User &gt;&gt;" name="add_user"/>
        </p>
        <p align="center">
         <input οnclick="MoveOption('Users','Up');" type="button" value="Up" name="up_users"/>
         <input οnclick="MoveOption('Users','Down');"  type="button"  value="Down" name="down_users"/>
        </p>
        <p align="center">
         <input οnclick="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" οnchange="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 οnclick="SetOptions(true);" type="button" value="全选"/>
          <input οnclick="SetOptions(false);" type="button" value="全部取消"/><br/>
          <input οnclick="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>
</body>
</html>