Example of moving lines when JS is used in the list box, which is taken from sugarcrm and should be used in Asp.net to reduce refresh

<Script language = "JavaScript">
VaR object_refs = new object ();

Function buildselecthtml (Info)
{
VaR text;
TEXT = "<select ";

If (typeof (info ['select'] ['SIZE'])! = 'Undefined ')
{
Text + = "size = \" "+ info ['select'] ['SIZE'] + "\"";
}

If (typeof (info ['select'] ['name'])! = 'Undefined ')
{
Text + = "name = \" "+ info ['select'] ['name'] + "\"";
}

If (typeof (info ['select'] ['style'])! = 'Undefined ')
{
Text + = "style = \" "+ info ['select'] ['style'] + "\"";
}

If (typeof (info ['select'] ['onchange'])! = 'Undefined ')
{
Text + = "onchange = \" "+ info ['select'] ['onchange'] + "\"";
}

If (typeof (info ['select'] ['Multiple '])! = 'Undefined ')
{
Text + = "multiple ";
}
Text + = "> ";

For (I = 0; I <info ['options']. length; I ++)
{
Option = info ['options'] [I];
Text + = "<option value = \" "+ Option ['value'] + "\"";
If (typeof (Option ['selected'])! = 'Undefined' & option ['selected'] = true)
{
Text + = "selected ";
}
Text + = ">" + Option ['text'] + "</option> ";
}
Text + = "</SELECT> ";
Return text;
}

Function left_to_right (left_name, right_name)
{
VaR display_columns_ref = object_refs [left_name];
// Alert (display_columns_ref );
VaR hidden_columns_ref = object_refs [right_name];

VaR left_td = Document. getelementbyid (left_name + '_ TD ');
VaR right_td = Document. getelementbyid (right_name + '_ TD ');

VaR selected_left = new array ();
VaR notselected_left = new array ();
VaR notselected_right = new array ();

VaR left_array = new array ();

// Determine which options are selected in left
For (I = 0; I <display_columns_ref.options.length; I ++)
{
If (display_columns_ref.options [I]. Selected = true)
{
Selected_left [selected_left.length] = {text: display_columns_ref.options [I]. Text, value: display_columns_ref.options [I]. Value };
}
Else
{
Notselected_left [notselected_left.length] = {text: display_columns_ref.options [I]. Text, value: display_columns_ref.options [I]. Value };
}

}

For (I = 0; I {
Notselected_right [notselected_right.length] = {text: hidden_columns_ref.options [I]. Text, value: hidden_columns_ref.options [I]. Value };

}

VaR left_select_html_info = new object ();
VaR left_options = new array ();
VaR left_select = new object ();

Left_select ['name'] = left_name + '[]';
Left_select ['id'] = left_name;
Left_select ['SIZE'] = '10 ';
Left_select ['Multiple '] = 'true ';

VaR right_select_html_info = new object ();
VaR right_options = new array ();
VaR right_select = new object ();

Right_select ['name'] = right_name + '[]';
Right_select ['id'] = right_name;
Right_select ['SIZE'] = '10 ';
Right_select ['Multiple '] = 'true ';

For (I = 0; I <notselected_right.length; I ++)
{
Right_options [right_options.length] = notselected_right [I];
}

For (I = 0; I <selected_left.length; I ++)
{
Right_options [right_options.length] = selected_left [I];
}
For (I = 0; I <notselected_left.length; I ++)
{
Left_options [left_options.length] = notselected_left [I];
}
Left_select_html_info ['options'] = left_options;
Left_select_html_info ['select'] = left_select;
Right_select_html_info ['options'] = right_options;
Right_select_html_info ['select'] = right_select;
Right_select_html_info ['style'] = 'background: lightgrey ';

VaR left_html = buildselecthtml (left_select_html_info );
VaR right_html = buildselecthtml (right_select_html_info );

Left_td.innerhtml = left_html;
Right_td.innerhtml = right_html;
Object_refs [left_name] = left_td.getelementsbytagname ('select') [0];
Object_refs [right_name] = right_td.getelementsbytagname ('select') [0];
}

Function right_to_left (left_name, right_name)
{
VaR display_columns_ref = object_refs [left_name];
VaR hidden_columns_ref = object_refs [right_name];

VaR left_td = Document. getelementbyid (left_name + '_ TD ');
VaR right_td = Document. getelementbyid (right_name + '_ TD ');

VaR selected_right = new array ();
VaR notselected_right = new array ();
VaR notselected_left = new array ();

For (I = 0; I {
If (hidden_columns_ref.options [I]. Selected = true)
{
Selected_right [selected_right.length] = {text: hidden_columns_ref.options [I]. Text, value: hidden_columns_ref.options [I]. Value };
}
Else
{
Notselected_right [notselected_right.length] = {text: hidden_columns_ref.options [I]. Text, value: hidden_columns_ref.options [I]. Value };
}

}

For (I = 0; I <display_columns_ref.options.length; I ++)
{
Notselected_left [notselected_left.length] = {text: display_columns_ref.options [I]. Text, value: display_columns_ref.options [I]. Value };

}

VaR left_select_html_info = new object ();
VaR left_options = new array ();
VaR left_select = new object ();

Left_select ['name'] = left_name + '[]';
Left_select ['id'] = left_name;
Left_select ['Multiple '] = 'true ';
Left_select ['SIZE'] = '10 ';

VaR right_select_html_info = new object ();
VaR right_options = new array ();
VaR right_select = new object ();

Right_select ['name'] = right_name + '[]';
Right_select ['id'] = right_name;
Right_select ['Multiple '] = 'true ';
Right_select ['SIZE'] = '10 ';

For (I = 0; I <notselected_left.length; I ++)
{
Left_options [left_options.length] = notselected_left [I];
}

For (I = 0; I <selected_right.length; I ++)
{
Left_options [left_options.length] = selected_right [I];
}
For (I = 0; I <notselected_right.length; I ++)
{
Right_options [right_options.length] = notselected_right [I];
}
Left_select_html_info ['options'] = left_options;
Left_select_html_info ['select'] = left_select;
Right_select_html_info ['options'] = right_options;
Right_select_html_info ['select'] = right_select;
Right_select_html_info ['style'] = 'background: lightgrey ';

VaR left_html = buildselecthtml (left_select_html_info );
VaR right_html = buildselecthtml (right_select_html_info );

Left_td.innerhtml = left_html;
Right_td.innerhtml = right_html;
Object_refs [left_name] = left_td.getelementsbytagname ('select') [0];
Object_refs [right_name] = right_td.getelementsbytagname ('select') [0];
}

Function up (name ){
VaR TD = Document. getelementbyid (name + '_ TD ');
VaR OBJ = TD. getelementsbytagname ('select') [0];
OBJ = (typeof OBJ = "string ")? Document. getelementbyid (OBJ): OBJ;
If (obj. tagname. tolowercase ()! = "Select" & obj. Length <2)
Return false;
VaR sel = new array ();

For (I = 0; I <obj. length; I ++ ){
If (OBJ [I]. Selected = true ){
Sel [SEL. Length] = I;
}
}
For (I in SEL ){
If (SEL [I]! = 0 &&! OBJ [sel [I]-1]. Selected ){
VaR TMP = new array (OBJ [sel [I]-1]. Text, OBJ [sel [I]-1]. value );
OBJ [sel [I]-1]. Text = OBJ [sel [I]. text;
OBJ [sel [I]-1]. value = OBJ [sel [I]. value;
OBJ [sel [I]. Text = TMP [0];
OBJ [sel [I]. value = TMP [1];
OBJ [sel [I]-1]. Selected = true;
OBJ [sel [I]. Selected = false;
}
}
}

Function down (name ){
VaR TD = Document. getelementbyid (name + '_ TD ');
VaR OBJ = TD. getelementsbytagname ('select') [0];
If (obj. tagname. tolowercase ()! = "Select" & obj. Length <2)
Return false;
VaR sel = new array ();
For (I = obj. Length-1; I>-1; I --){
If (OBJ [I]. Selected = true ){
Sel [SEL. Length] = I;
}
}
For (I in SEL ){
If (SEL [I]! = Obj. Length-1 &&! OBJ [sel [I] + 1]. Selected ){
VaR TMP = new array (OBJ [sel [I] + 1]. Text, OBJ [sel [I] + 1]. value );
OBJ [sel [I] + 1]. Text = OBJ [sel [I]. text;
OBJ [sel [I] + 1]. value = OBJ [sel [I]. value;
OBJ [sel [I]. Text = TMP [0];
OBJ [sel [I]. value = TMP [1];
OBJ [sel [I] + 1]. Selected = true;
OBJ [sel [I]. Selected = false;
}
}
}

</SCRIPT>