Home > Developer > JavaScript
How does JavaScript implement element movement in the composite list box?
First, let's talk about the differences between a combo box and a list box:
The combo box includes the list box and text box functions.
Text Box: Only data can be entered
List box: Only data can be selected
Combo box: both data input and''
Application Background: There are two lists on the page. You need to move the elements of one list box to another.
The basic idea of implementation:
(1) write the init method to initialize the two lists;
(2) Call the init method to add an onload event to the body;
(3) Write move (s1, s2) to move the options selected in s1 to s2;
(4) Write moveAll (s1, s2) to move all the options in s1 to s2.
(5) add an onclick event for the button.
The javascript code is as follows:
<Script type = "text/javascript" language = "javascript"> // initialize function init () {for (I =; I <; I ++) {var y = document. createElement ("option"); // Add an element optiony. text = 'options' + I; var x = document. getElementById ("s"); // locate the list box x. add (y, null); // move the selected option to the other side of the function move (s, s) {var index = s. selectedIndex; if (index =-) {alert ("No selected value"); return;} s. length ++; s. options [s. length-]. value = s. options [index]. value; s. options [s. length-]. text = s. options [index]. text; // the currently selected value in s is assigned to s's last element. remove (index); // remove the current element from s} // move one side completely to the other side function moveAll (s, s) {if (s. length =) {alert ("no available options"); return;} s. length = s. length + s. length; for (var I =; I <s. length; I ++) {s. options [s. length-s. length + I]. value = s. options [I]. value; s. options [s. length-s. length + I]. text = s. options [I]. text;} s. length = ;}</script>
<Body> code:
<body onload="init()"><table><tr><td><select id="s" size= style="width:"></select></td><td><input type="button" name="moveToRight" value=">"onClick="move(s,s)"> <br><br> <input type="button" name="moveAllToRight" value=">>"onClick="moveAll(s,s)"> <br> <input type="button"name="moveToLeft" value="<" onClick="move(s,s)"> <br><br> <input type="button" name="moveAllToLeft" value="<<"onClick="moveAll(s,s)"></td><td><select id="s" name="s" size= style="width:"></select></td></tr></table></body>
The above content introduces you to the knowledge about how JavaScript can implement the element moving effect in the composite list box. I hope it will be helpful to you!
Articles you may be interested in:Start 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
