The basic idea of realization:Application background: There are two list boxes in the page, you need to move the elements of one of the list boxes to another list box.
(1) Write the Init method to initialize two list boxes;
(2) Call the Init method for body add onload event;
(3) write Move (S1,S2) to move the selected option in S1 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:
1<script type= "Text/javascript" language= "JavaScript" >2 //Initialize the drop-down box information3 functioninit () {4 for(i = 0; i < i++;) {5 vary = document.createelement ("option");//Add an element of option6y.text = ' option ' +i;7 varX=document.getelementbyid ("S1")//Find list box by ID8 9X.add (Y,NULL);//Ten One } A - } - the //Move the selected option to the other side - functionMove (S1, S2) { - varindex =S1.selectedindex; - if(Index = =-1) { +Alert ("No Value selected"); - return; + } A ats2.length++; -S2.options[s2.length-1].value =S1.options[index].value; -S2.options[s2.length-1].text =The currently selected value in S1.OPTIONS[INDEX].TEXT;//S1 is assigned to the last element of S2 - S1.remove (index);//Remove the current element from the S1 - } - in //move the side completely to the other side. - functionMoveall (S1, S2) { to if(S1.length = = 0) { +Alert ("No selection available"); - return; the } *S2.length = S2.length +s1.length; $ for(vari = 0; i < s1.length; i++) {Panax NotoginsengS2.options[s2.length-s1.length + I].value =S1.options[i].value; -S2.options[s2.length-s1.length + I].text =S1.options[i].text; the } + AS1.length = 0; the } +</script>
<body> Code:
1 <Bodyonload= "init ()">2 <Table>3 <TR>4 <TD><SelectID= "S1"size=10style= "width:100"></Select></TD>5 6 <TD><inputtype= "button"name= "Movetoright"value= ">"7 OnClick= "Move (S1,S2)"> <BR>8 <BR> <inputtype= "button"name= "Movealltoright"value= ">>"9 OnClick= "Moveall (s1,s2)"> <BR> <inputtype= "button"Ten name= "Movetoleft"value= "<"OnClick= "Move (S2,S1)"> <BR> One <BR> <inputtype= "button"name= "Movealltoleft"value= "<<" A OnClick= "Moveall (s2,s1)"></TD> - <TD><SelectID= "S2"name= "S2"size=10style= "width:100"></Select></TD> - the </TR> - </Table> - - </Body>
JavaScript implements the element movement effect in a combo list box
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
