»
Tiếng AnhTiếng PhápTiếng Việt

In - Thêm các mục chọn vào listbox - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Thêm các mục chọn vào listbox
URL: https://www.javascriptbank.com/user-management.html

Thêm các mục chọn vào listbox © JavaScriptBank.comHiệu ứng có thể thêm các item do người dùng chọn vào một listbox, các item này người dùng có thể tự đặt được.

Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Thêm các mục chọn vào listbox
URL: https://www.javascriptbank.com/user-management.html



JavaScript
<SCRIPT LANGUAGE="JavaScript">// Sergei Kouzminiov ([email protected])<!-- Beginvar delimiter = ":";function MoveOption (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("Please select a person(s) to move.");  } 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;        SelectFrom.options[i] = null;        SelectTo.options[SelectTo.options.length]=new Option (name,ID);        i=i-1;        if(ToDo=='Add'||ToDo=='Remove') {          container.value=container.value+name+delimiter;          //container.value=container.value+ID+delimiter;        }      }    }}}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><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<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> <INPUTtype=hidden name=RemoveUsers><div align="center"><table cellspacing="0" cellpadding="5" border="0"><tbody><tr><td valign="top" align="middle" rowspan="2">Employees<br><select multiple size="12" name="Employees"><option>Employee_01<option>Employee_02<option>Employee_03<option>Employee_04<option>Employee_05<option>Employee_06<option>Employee_07<option>Employee_08<option>Employee_09<option>Employee_10</option></select></td><td><p align="center"><input onclick="MoveOption('Employees','Admins','Add');" type="button" value="Admin >>" name=add_admin></p><p align="center"><input onclick="MoveOption('Admins','Employees','Remove');" type="button" value="<< Admin" name="remove_admin"></p></td><td valign="top" align="middle">Administrators<br><select multiple size="5" name="Admins"><option>Admin_01<option>Admin_02<option>Admin_03<option>Admin_04<option>Admin_05</option></select></td></tr><tr><td><p align="center"><input onclick="MoveOption('Employees','Users','Add');" type="button" value=" User >> " name=add_user></p><p align="center"><input onclick="MoveOption('Users','Employees','Remove');" type="button" value=" << User " name="remove_user"></p></td><td valign="top" align="middle">Users<br><select multiple size="5" name="Users"><option>User_01<option>User_02<option>User_03<option>User_04<option>User_05</option></select></td></tr></tbody></table></div></FORM></td></tr><tr><td><div align="center"><input onclick="LockChanges();" type="button" value="Submit"></div><BR><div align="center">Click on &quot;Submit&quot; button to lock all changes<BR>and save results in appropriate hidden fields.<BR>To browse content click below on field&#39;s name:</div><BR><div align="center"><a href="javascript:alert(document.main_form.AddAdmins.value);">Add Admins</a><br><a href="javascript:alert(document.main_form.RemoveAdmins.value);">Remove Admins</a><br><a href="javascript:alert(document.main_form.AddUsers.value);">Add Users</a><br><a href="javascript:alert(document.main_form.RemoveUsers.value);">Remove Users</a></div></td></tr></td></tr></table><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->