»
EnglishFrenchVietnamese

Print - Manipulate Select Boxes - JavaScriptBank.com

Full version: jsB@nk » Form » Dropdown » Manipulate Select Boxes
URL: https://www.javascriptbank.com/manipulate-select-boxes.html

Manipulate Select Boxes © JavaScriptBank.comVisitors can use this scipt to move options in 2 combo box together.

Full version: jsB@nk » Form » Dropdown » Manipulate Select Boxes
URL: https://www.javascriptbank.com/manipulate-select-boxes.html



JavaScript
<SCRIPT language=JavaScript type=text/javascript><!--//Everything you see here was written by Guy Malachi guy@guymal.comfunction MoveUp(combo){i=combo.selectedIndex;if (i>0){swap(combo,i,i-1);combo.options[i-1].selected=true;combo.options[i].selected=false;}}function MoveDown(combo){i=combo.selectedIndex;if (i<combo.length-1 && i>-1){swap(combo,i+1,i);combo.options[i+1].selected=true;combo.options[i].selected=false;}}//this function is used to swap between elementsfunction swap(combo,index1, index2){var savedValue=combo.options[index1].value;var savedText=combo.options[index1].text;combo.options[index1].value=combo.options[index2].value;combo.options[index1].text=combo.options[index2].text;combo.options[index2].value=savedValue;combo.options[index2].text=savedText;}function MoveToTop(combo){i=combo.selectedIndex;for (;i>0;i--){swap(combo,i,i-1);combo.options[i-1].selected=true;combo.options[i].selected=false;}}function MoveToBottom(combo){i=combo.selectedIndex;if (i>-1){for (;i<combo.length-1;i++){swap(combo,i+1,i);combo.options[i+1].selected=true;combo.options[i].selected=false;}}}//moves options from one selection box (combo box) to another//removes the all selected options from one combo box and adds them to the second combo boxfunction MoveElements(FromCombo,ToCombo){var to_remove_counter=0; //number of options that were removed (num selected options)//move selected options to right select box (to)for (var i=0;i<FromCombo.options.length;i++){if (FromCombo.options[i].selected==true){var addtext=FromCombo.options[i].text;var addvalue=FromCombo.options[i].value;ToCombo.options[ToCombo.options.length]=new Option(addtext,addvalue);FromCombo.options[i].selected=false;++to_remove_counter;}else{FromCombo.options[i-to_remove_counter].selected=false;FromCombo.options[i-to_remove_counter].text=FromCombo.options[i].text;FromCombo.options[i-to_remove_counter].value=FromCombo.options[i].value;}}//now cleanup the last remaining options var numToLeave=FromCombo.options.length-to_remove_counter;for (i=FromCombo.options.length-1;i>=numToLeave;i--) { FromCombo.options[i]=null;}}function SelectAll(combo){for (var i=0;i<combo.options.length;i++){combo.options[i].selected=true;}}//--></SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<TABLE cellSpacing=0 cellPadding=0 border=0>  <TBODY>  <TR style="FONT-SIZE: 0.8em">    <TD vAlign=bottom align=left>All Elements [ <SPAN       onmouseover='this.style.color="red"' style="CURSOR: hand; COLOR: blue"       onclick=SelectAll(left_select) onmouseout='this.style.color="blue"'>Select All</SPAN> ] </TD>    <TD>&nbsp; </TD>    <TD vAlign=bottom align=left>Selected Elements </TD>    <TD>&nbsp; </TD></TR>  <TR vAlign=top>    <TD rowSpan=4><SELECT style="WIDTH: 100%" tabIndex=1 multiple size=10       name=left_select> <OPTION value=bill@ms.com>Bill Gates</OPTION> <OPTION         value=bill@unemployed.com>Bill Clinton</OPTION> <OPTION         value=bart@brat.com>Bart Simpson</OPTION> <OPTION value=oj@free.com>OJ Simpson</OPTION> <OPTION value=j@nbc.com>Jay Leno</OPTION> <OPTION         value=david@topten.com>David Letterman</OPTION> <OPTION         value=maybe@next-time.com>Al Gore</OPTION> <OPTION         value=prez@whitehouse.gov>George W. Bush</OPTION></SELECT> </TD>    <TD vAlign=center rowSpan=4><INPUT title="Move elements to the right select box." style="WIDTH: 76px; CURSOR: hand" onclick=MoveElements(left_select,right_select); tabIndex=2 type=button value="Add>>">       <BR><INPUT title="Return elements to the left select box." style="WIDTH: 76px; CURSOR: hand" onclick=MoveElements(right_select,left_select) tabIndex=3 type=button value="<<Remove">     </TD>    <TD rowSpan=4><SELECT style="WIDTH: 184px" tabIndex=4 multiple size=10       name=right_select></SELECT> </TD>    <TD><INPUT title="Move selected element to the top." style="FONT-SIZE: x-small; WIDTH: 20px; HEIGHT: 40px" onclick=MoveToTop(right_select) tabIndex=5 type=button value="&nbsp;/\&nbsp;&nbsp;&#13;&#10;&nbsp;/\&nbsp;&nbsp;&nbsp;">     </TD></TR>  <TR vAlign=bottom>    <TD><INPUT title="Move selected element up." style="FONT-SIZE: x-small; WIDTH: 20px; HEIGHT: 20px" onclick=MoveUp(right_select) tabIndex=6 type=button value=/\>     </TD></TR>  <TR vAlign=top>    <TD><INPUT title="Move selected element down." style="FONT-SIZE: x-small; WIDTH: 20px; HEIGHT: 20px" onclick=MoveDown(right_select) tabIndex=7 type=button value=\/>     </TD></TR>  <TR vAlign=bottom>    <TD><INPUT title="Move selected element to the bottom." style="FONT-SIZE: x-small; WIDTH: 20px; HEIGHT: 40px" onclick=MoveToBottom(right_select) tabIndex=8 type=button value="&nbsp;\/&nbsp;&nbsp;&#13;&#10;&nbsp;\/&nbsp;&nbsp;&nbsp;">     </TD></TR></TBODY></TABLE><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->