Heim >Web-Frontend >js-Tutorial >JavaScript implementiert zwei Auswahl-Dropdown-Box-Optionen zum Verschieben nach links und rechts
In diesem Artikel wird der JavaScript-Code zum Implementieren von zwei ausgewählten Dropdown-Box-Optionen zum Verschieben nach links und rechts vorgestellt.
Ich habe heute nichts zu tun und habe einen geschrieben Dropdown mit zwei Auswahlmöglichkeiten mit js. Ein kleines Programm, das Elemente zwischen Boxen verschieben kann. Ich habe gerade angefangen, JavaScript zu lernen, und es gibt noch viele Bereiche zur Optimierung.
Javascript-Code
Der Code lautet wie folgt | |
/**Verschieben Sie das ausgewählte Element nach rechts**/ functionmoveRight() { "); varoptionElements = selectElement.getElementsByTagName("option"); varlen = optionElements.length;
if(!(selectElement.selectedIndex==-1)) //Wenn kein Element ausgewählt ist, dann ist selectedIndex -1 {
//Das zweite ausgewählte Objekt abrufen varselectElement2 = document.getElementById("secend");
// Nach rechts bewegen for(vari=0;i< ;len. ;i++) 🎜> { warning("Sie haben nicht ausgewählt das Element, das verschoben werden soll! { //Das erste ausgewählte Objekt abrufen varselectElement = document.getElementById("first "); varoptionElements = selectElement.getElementsByTagName(" option"); varlen = optionElements.length; //alert(len); // Das Array in der ersten Auswahl umdrehen varfirstOption =newArray(); for(vark=len-1;k>=0;k --) { firstOption. push(optionElements[k]); } varlens = firstOption.length ; //Das zweite ausgewählte Objekt abrufen varselectElement2 = document.getElementById("secend"); for(varj=lens-1;j>=0 ;j--) { selectElement2 .appendChild(firstOption[j]); } } //Das ausgewählte Element nach links verschieben functionmoveLeft() { //Zuerst das zweite ausgewählte Objekt abrufen varselectElement = document.getElementById("secend");
varoptionElement = selectElement.getElementsByTagName("option"); varlen = optionElement.length;
//Das erste Element erneut abrufen if(!(selectElement.selectedIndex==-1)) { varfirstSelectElement = document.getElementById("first"); for(i =0;i selectedIndex]);//Der Index des ausgewählten Elements } } //Alle nach links verschieben 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]); } } |
Das Obige ist der Javascript-Code und das Folgende ist der HTML- und CSS-Code.
Html-Code
Der Code lautet wie folgt
|
|
||||
Verwandte Empfehlungen: |
Das obige ist der detaillierte Inhalt vonJavaScript implementiert zwei Auswahl-Dropdown-Box-Optionen zum Verschieben nach links und rechts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!