This article is excerpted from: Java Web development tutorial-getting started and improving (JSP + servlet)
Instance: combined list boxApplication Background: There are two lists on the page. You need to add some options on the left to the list box on the right, or move some options on the left to the list box on the left. Typical Example: effect of combining a list box: effect 4.1. Figure 4.1 basic idea for implementing a combined list box: l write the init method to initialize the two lists; l add the onload event to the body to call the init method; l write move (S1, S2) method to add the option selected in S1 to S2 and delete the option in S1; l write moveall (S1, S2) to move all the options in S1 to S2; l adds an onclick event for the four buttons in the middle, and calls the move (S1, S2) and moveall (S1, S2) methods respectively. <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"> <HTML> <script language = "JavaScript" type = "text/JavaScript"> // initialize function Init () in the drop-down list () {var Options = new array (10); for (I = 0; I <10; I ++) {options [I] = "option" + (I + 1);} s1.length = 10; for (I = 0; I <10; I ++) {s1.options [I]. value = I + 1; s1.options [I]. TEXT = options [I] ;}/// move the selected option to the right-side function move (S1, S2) {// you can determine whether the selected item index = s1.selectedindex exists. If (Index =-1) {alert ("not selected"); return;} // modify S2 and add the options selected in S1 to s2.length ++ in S2; s2.options [s2.length-1]. value = s1.options [Index]. value; s2.options [s2.length-1]. TEXT = s1.options [Index]. text; // Delete s1.remove (INDEX) selected in S1;} // move all options to function moveall (S1, S2) on the right) {// determine whether a selection item is available if (s1.length = 0) {alert ("no selection available"); return ;} // Add the options in S1 to s2.length = s1.length + s2.length; for (I = 0; I <s1.length; I ++) {s 2. options [s2.length-s1.length + I]. value = s1.options [I]. value; s2.options [s2.length-s1.length + I]. TEXT = s1.options [I]. text;} // clear S1 s1.length = 0 ;} </SCRIPT> <style type = "text/CSS"> input {width = 40 }</style> 18th about JavaScript processing (1)Next Lecture: 20th Ajax OverviewLi xucheng csdn blog: Why? U= 124362 & C = 7be8ba2b6f3b6cc5Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
