Maison >interface Web >js tutoriel >JavaScript implémente deux options de liste déroulante de sélection pour se déplacer vers la gauche et la droite
Cet article présente le code JavaScript pour implémenter deux options de liste déroulante de sélection pour se déplacer à gauche et à droite. Les étudiants intéressés peuvent se référer à cet article
Je n'ai rien à faire aujourd'hui et j'ai écrit un. liste déroulante avec deux sélections utilisant js. Un petit programme qui peut déplacer des éléments entre les cases. Je viens de commencer à apprendre JavaScript et il reste encore de nombreux domaines à optimiser.
Code Javascript
Le code est le suivant | |
/**Déplacer l'élément sélectionné vers la droite**/ functionmoveRight() { "); varoptionElements = selectElement.getElementsByTagName("option"); varlen = optionElements.length;
if(!(selectElement.selectedIndex==-1)) //Si aucun élément n'est sélectionné, alors selectedIndex est -1 {
//Obtenir le deuxième objet sélectionné varselectElement2 = document.getElementById("secend"); < 🎜> { alert("Vous n'avez pas sélectionné l'élément à déplacer !"); } }
/ /Déplacer tout vers la droite functionmoveAll() { //Obtenir le premier objet sélectionné varselectElement = document.getElementById("first "); varoptionElements = selectElement.getElementsByTagName(" option"); varlen = optionElements.length; //alert(len);
// Retourne le tableau dans le premier sélectionné varfirstOption =newArray(); for(vark=len-1;k>=0;k --) { firstOption. push(optionElements[k]);
} varlens = firstOption.length ; //Obtenir le deuxième objet sélectionné varselectElement2 = document.getElementById("secend"); for(varj=lens-1;j>=0 ;j--) { selectElement2 .appendChild(firstOption[j]); } }
//Déplace l'élément sélectionné vers la gauche functionmoveLeft() { //Obtenir d'abord le deuxième objet sélectionné varselectElement = document.getElementById("secend"); varoptionElement = selectElement.getElementsByTagName("option"); varlen = optionElement.length; //Récupère à nouveau le premier élément if(!(selectElement.selectedIndex==-1)) { varfirstSelectElement = document.getElementById("first"); selectedIndex]);//L'index de l'élément sélectionné } }else { alert("Vous n'avez rien sélectionné à déplacer. projet !"); } } //Déplacer tout vers la gauche 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]); } } |
Ce qui précède est le code javascript, et ce qui suit est le code html plus css.
Code HTML
Le code est le suivant
|
|
||||
Recommandations associées : |
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!