Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Thêm/bớt một mục chọn
URL: https://www.javascriptbank.com/manipulate-select-boxes.html
Hiệu ứng tạo ra hai hộp thoại">hộp thoại chứa các đối tượng và ta có thể di chuyển">di chuyển các đối tượng này qua lại giữa hai hộp thoại.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Thêm/bớt một mục chọn
URL: https://www.javascriptbank.com/manipulate-select-boxes.html
<SCRIPT language=JavaScript type=text/javascript><!--//Everything you see here was written by Guy Malachi [email protected] 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--><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> </TD> <TD vAlign=bottom align=left>Selected Elements </TD> <TD> </TD></TR> <TR vAlign=top> <TD rowSpan=4><SELECT style="WIDTH: 100%" tabIndex=1 multiple size=10 name=left_select> <OPTION [email protected]>Bill Gates</OPTION> <OPTION [email protected]>Bill Clinton</OPTION> <OPTION [email protected]>Bart Simpson</OPTION> <OPTION [email protected]>OJ Simpson</OPTION> <OPTION [email protected]>Jay Leno</OPTION> <OPTION [email protected]>David Letterman</OPTION> <OPTION [email protected]>Al Gore</OPTION> <OPTION [email protected]>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=" /\ /\ "> </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=" \/ \/ "> </TD></TR></TBODY></TABLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->