JoeGarrepy.com Java Script Option and Selected in Order List Boxes

Programming/
Tools
      Oracle
      JavaScript
      C#

Fun Stuff
      Music
      Martial Arts
      Robotech

Other
      Main

DISCLAIMER

This disclaimer is intended to cover all software/freeware, and other various files which are downloadable through or from this site.
Joe Garrepy, isp, and web host can not be held responsible for any software downloaded from this site. All freeware is downloaded at your own risk. Software which is listed on this site is assumed to work properly, but may or may not have different effects on different computer systems. The same rules apply to these programs. Joe Garrepy assumes no responsibility for those unusual occurrences where software has adverse effects on users computer. Joe Garrepy does not warrant these programs/files, and as such, can offer no guidelines in which to use them. All freeware/software/files, trademarks, service marks, and copyrights are acknowledged as belonging to their owners. Any of these which the owner wishes to be removed will be done so immediately. By downloading any software or viewing pages in which software can be downloaded, you agree to be bound to this agreement.

JoeGarrepy.com Java Script Option and Selected in Order List Boxes

Two list boxes side by side. The main list box to the left contains all the options, the list box on the right contains what has been selected. The buttons in the middle move options from List box to List box by the appropriate triangle. The buttons to the right of the right most List box will move the order or the items in the right most List box up or down. The return button will return the items in the right most list box to the return field as a comma delimited list.

Java Script Portion

<! *** Original by Joe Garrepy (doughjoe77@hotmail.com) ***>
<SCRIPT language=JavaScript>
function RetField(in_sel_from,in_hid_col,in_disp_col)
{
  for (var intLoop = 0; intLoop < in_sel_from.length; intLoop++)
  {
    in_hid_col.value="";
    in_disp_col.value="";
    for (var intLoop = 0; intLoop < in_sel_from.length; intLoop++)
    {
      in_hid_col.value += in_sel_from[intLoop].value + ",";
      in_disp_col.value += in_sel_from[intLoop].text + "\n";
    }
  }
}
function UpDwn(in_sel_from,in_sel_to,in_hid_col,in_disp_col,in_up_dwn)
{
  var varOldCode;
  var varOldDesc;
  var varNewCode;
  var varNewDesc;
  if(in_up_dwn=="+")
  {
    for (var intLoop = 0; intLoop < in_sel_from.length; intLoop++)
    {
      if(intLoop!=0)
      {
        if(in_sel_from[intLoop].selected)
        {
          varNewCode = in_sel_from[intLoop].value;
          varNewDesc = in_sel_from[intLoop].text;
          varOldCode = in_sel_from[parseInt(intLoop)-1].value;
          varOldDesc = in_sel_from[parseInt(intLoop)-1].text;
          in_sel_from.options[intLoop] = new Option(varOldDesc,varOldCode);
          in_sel_from.options[parseInt(intLoop)-1] = new Option(varNewDesc,varNewCode);
          in_sel_from.options[parseInt(intLoop)-1].selected = true;
        }
      }
    }
  }
  else
  {
    for (var intLoop = in_sel_from.length - 1; intLoop > -1; intLoop--)
    {
      if(in_sel_from[intLoop].selected)
      {
        if(parseInt(in_sel_from.length)!=parseInt(intLoop)+1)
        {
          varNewCode = in_sel_from[intLoop].value;
          varNewDesc = in_sel_from[intLoop].text;
          varOldCode = in_sel_from[parseInt(intLoop)+1].value;
          varOldDesc = in_sel_from[parseInt(intLoop)+1].text;
          in_sel_from.options[intLoop] = new Option(varOldDesc,varOldCode);
          in_sel_from.options[parseInt(intLoop)+1] = new Option(varNewDesc,varNewCode);
          in_sel_from.options[parseInt(intLoop)+1].selected = true;
        }
      }
    }
  }
  // Set hidden field
  RetField(in_sel_from,in_hid_col,in_disp_col);
}
function AddSort(in_sel_from,in_sel_to,in_hid_col,in_disp_col)
{
  var intAdd = 0;
  for (var intLoop = 0; intLoop < in_sel_from.length; intLoop++)
  {
    if(in_sel_from[intLoop].selected)
    {
      intAdd = in_sel_to.length;
      in_sel_to.options[intAdd] = new Option(in_sel_from[intLoop].text,in_sel_from[intLoop].value);
      in_sel_from[intLoop] = null;
      intLoop--;
    }
  }
  // Set hidden field
  RetField(in_sel_to,in_hid_col,in_disp_col);
}
function SubSort(in_sel_from,in_sel_to,in_hid_col,in_disp_col)
{
  var intAdd = 0;
  for (var intLoop = 0; intLoop < in_sel_from.length; intLoop++)
  {
    if(in_sel_from[intLoop].selected)
    {
      intAdd = in_sel_to.length;
      in_sel_to.options[intAdd] = new Option(in_sel_from[intLoop].text,in_sel_from[intLoop].value);
      in_sel_from[intLoop] = null;
      intLoop--;
    }
  }
  // Set hidden field
  RetField(in_sel_from,in_hid_col,in_disp_col);
}
</SCRIPT>

Html Portion

<FORM>
<INPUT TYPE="hidden" NAME="in_hid_col" VALUE="">
<INPUT TYPE="hidden" NAME="in_hid_disp" VALUE="">
<TABLE BORDER="0" BGCOLOR="#C0C0C0"><TR><TD>
<TABLE BORDER="0"><TR><TH>Options</TH></TR><TR><TD>
<SELECT MULTIPLE NAME="in_col1" attribute1="MULTIPLE" SIZE="8" STYLE="width:180;">
<OPTION VALUE="A">A
<OPTION VALUE="B">B
<OPTION VALUE="C">C
<OPTION VALUE="D">D
<OPTION VALUE="E">E
<OPTION VALUE="F">F
<OPTION VALUE="G">G
<OPTION VALUE="H">H
<OPTION VALUE="I">I
<OPTION VALUE="J">J
<OPTION VALUE="K">K
<OPTION VALUE="L">L
<OPTION VALUE="M">M
<OPTION VALUE="N">N
<OPTION VALUE="O">O
<OPTION VALUE="P">P
<OPTION VALUE="Q">Q
<OPTION VALUE="R">R
<OPTION VALUE="S">S
<OPTION VALUE="T">T
<OPTION VALUE="U">U
<OPTION VALUE="V">V
<OPTION VALUE="W">W
<OPTION VALUE="X">X
<OPTION VALUE="Y">Y
<OPTION VALUE="Z">Z
</SELECT></TD></TR></TABLE>
</TD><TD></TD>
<TD VALIGN="center" ALIGN="center"><TABLE BORDER="0"><TR><TD><INPUT TYPE="button" VALUE="4" NAME="btn_add" onClick="AddSort(this.form.in_col1,this.form.in_col2,this.form.in_hid_col,this.form.in_hid_disp)"  STYLE="width:21; height:24;background:#E3E5EE;color:black; font-family:webdings;"></TD></TR><TR><TD><INPUT TYPE="button" VALUE="3" NAME="btn_sub" onClick="SubSort(this.form.in_col2,this.form.in_col1,this.form.in_hid_col,this.form.in_hid_disp)"  STYLE="width:21; height:24;background:#E3E5EE;color:black; font-family:webdings;"></TD></TR></TABLE></TD>
<TD><TABLE BORDER="0"><TR><TH>Selected in Order</TH></TR><TR><TD>
<SELECT MULTIPLE NAME="in_col2" attribute1="MULTIPLE" SIZE="8" STYLE="width:180;"></SELECT>
</TD></TR></TABLE>
</TD><TD VALIGN="center" ALIGN="center"><TABLE BORDER="0"><TR><TD><INPUT TYPE="button" VALUE="5" NAME="btn_up" onClick="UpDwn(this.form.in_col2,this.form.in_col1,this.form.in_hid_col,this.form.in_hid_disp,'+')"  STYLE="width:21; height:24;background:#E3E5EE;color:black; font-family:webdings;"></TD></TR><TR><TD><INPUT TYPE="button" VALUE="6" NAME="btn_dwn" onClick="UpDwn(this.form.in_col2,this.form.in_col1,this.form.in_hid_col,this.form.in_hid_disp,'-')"  STYLE="width:21; height:24;background:#E3E5EE;color:black; font-family:webdings;"></TD></TR></TABLE>
</TD></TR><TR>
<TD VALIGN="center" ALIGN="center" COLSPAN="10">
  <INPUT TYPE="button" VALUE="Return" NAME="btn_ret"
   onClick="txtReturn.value=this.form.in_hid_col.value;"
   STYLE="background:#E3E5EE;color:black;font-weight:bold;">
   
   <INPUT TYPE="text" NAME="txtReturn" width=35>
</TD></TR></TABLE>
</FORM>

If you find any bugs or want to contact me I can be reached @ doughjoe77@hotmail.com.

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z