This article introduces JavaScript code to implement two select drop-down box options to move left and right. Interested students can refer to this article
I have nothing to do today and I wrote a drop-down with two select using js. A small program that can move elements between boxes. I have just started learning JavaScript and there are still many areas for optimization.
Javascript code
The code is as follows | |
/**Move the selected element to the right**/ functionmoveRight() {
use using use using out out out ’s ’ ’s ’ through out ’s through out ‐ through out ‐ through ‐ ‐‐‐‐ and, to "); varoptionElements = selectElement.getElementsByTagName("option"); varlen = optionElements.length;
if(!(selectElement.selectedIndex==-1)) //If no element is selected, then selectedIndex will be -1 SelectedIndex ‐‐‐1 select object varselectElement2 = document.getElementById("secend");
// Move to the right for(vari=0;i< ) # { alert("You have not selected the element to move!"); } }
/ /Move all to the right functionmoveAll() { //Get the first select object varselectElement = document.getElementById("first "); varoptionElements = selectElement.getElementsByTagName("option"); varlen = optionElements.length; //alert(len); //Flip the array in the first selected varfirstOption =newArray(); for(vark=len-1;k>=0;k -) ; //Get the second select object varselectElement2 = document.getElementById("secend"); for(varj=lens-1;j>=0 ) # //Move the selected element to the left functionmoveLeft() { //First get the second select object varselectElement = document.getElementById("secend");varoptionElement = selectElement.getElementsByTagName("option"); varlen = optionElement.length;
// Get the first element again if (!(selectElement.selectedIndex==-1)) varfirstSelectElement = document.getElementById("first"); for(i=0;i { firstSelectElement.appendChild(optionElement[selectElement. selectedIndex]);//The index of the selected element } }else { alert("You have not selected anything to move. s project!"); } } //Move all to the left functionmoveAllLeft() varselectElement = document.getElementById( "secend"); varoptionElements = document.getElementsByTagName("option"); varlen = optionElements.length; varoptionEls =newArray(); for(vari=len-1;i>=0;i--) { optionEls.push(optionElements[i]); } varlens = optionEls.length; varfirstSelectElement = document.getElementById("first"); for(varj=lens-1;j> =0;j--) { firstSelectElement.appendChild(optionEls[j]); } } |
Html code
The code is as follows
.select_move { margin:0px auto; width:206px; height:140px; margin-top:300px;} .select_move_1 { float:left;} .select_move_2 { float:left; } .select_move_3 { float:left;}
< ;body>
first"size="10"id="first"multiple="multiple"> "Toyota">Toyota < /option> # # & lt; inputtype = "Button" Value = "=== & GT;" OnClick = "Moveall ()" /& GT; & LT; & LT; "value="<------"onclick="moveLeft()"/> "onclick="moveAllLeft()"/> id="secend"multiple="multiple"> # |