Home > Developer > JavaScript
first of all, let's say the difference between combo box and list box:
The combo box includes the function of a list box and a text box
Text boxes: Only data can be entered
List box: Only data can be selected
Combo box: Can input data, but also select the "
Application background: There are two list boxes on the page, and you need to move the elements of one of the list boxes to another list box.
The basic idea of realization:
(1) Write the Init method to initialize the two list boxes;
(2) Adding the OnLoad event to the body to invoke the Init method;
(3) write Move (S1,S2) to S1 the selected option to S2;
(4) Write Moveall (S1,S2) to move all the options in S1 to S2.
(5) Add the OnClick event for the button.
The JavaScript code is as follows:
<script type= "Text/javascript" language= "JavaScript" >
//dropdown box information initialization
function init () {for
(i =; I <; i++) {
var y = document.createelement ("option");//Add an element option
y.text = ' option ' + i;
var X=document.getelementbyid ("S");//Find list box
x.add (y, NULL) by ID;/
/
}
//Move selected option to the other side
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 = The value currently selected in S.OPTIONS[INDEX].TEXT;//S is assigned to the last element
S.remove (index) of S;//Remove the current element from S
}
//Move the side completely to the other side
function Moveall (s, s) {
if (s.length = =) {
alert ("No choice available");
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 =;
}
<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 for you to introduce how JavaScript to achieve the combination of the elements of the list box to move the effect of knowledge, hope to help you!
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
