Changement d'éléments de menu entre deux listes en utilisant des boutons en JavaScript

J'ai cette tâche d'école sur laquelle je travaille et je suis totalement perplexe quant à la raison pour laquelle il fait ce qu'il fait. Fondamentalement, c'est une liste de sélection à gauche, 2 boutons du milieu, et une liste de sélection à droite. Le but est de déplacer les options entre les listes. Mon problème est le suivant: une sélection est faite sur la liste de gauche, le bouton de déplacement vers la liste de droite est cliqué, une option est ajoutée à la liste de droite nommée "non défini" et la sélection dans la liste de gauche disparaît. Je ne veux pas que quelqu'un fasse mes devoirs pour moi, mais des conseils et astuces sont grandement appréciés.Changement d'éléments de menu entre deux listes en utilisant des boutons en JavaScript

Voici mon code:

<script type="text/javascript"> 
/* <![CDATA[ */ 
function moveRight() { 
    var leftCurText = document.forms[0].leftSide.selectedIndex.text; 
    var leftCurValue = document.forms[0].leftSide.selectedIndex.value; 
    var leftCurName = document.forms[0].leftSide.selectedIndex; 

    if (leftCurName != -1) {   
     var listName = new Option(); 
     listName.text = leftCurText; 
     listName.value = leftCurValue; 
     nextItem = document.forms[0].rightSide.length; 
     document.forms[0].rightSide.options[nextItem] = listName; 
     document.forms[0].leftSide.options[leftCurName] = null; 
    } else if (document.forms[0].leftSide.length <= 0) { 
     window.alert("There are no more options in the left list") 
    } 
    else 
     window.alert("No option is selected on the left side"); 
} 

function moveLeft() { 
    var rightCurText = document.forms[0].rightSide.selectedIndex.text; 
    var rightCurValue = document.forms[0].rightSide.selectedIndex.value; 
    var rightCurName = document.forms[0].rightSide.selectedIndex; 

    if (rightCurName != -1) { 
     var listName = new Option(); 
     listName.text = rightCurText; 
     listName.value = rightCurValue; 
     nextItem = document.forms[0].leftSide.length; 
     document.forms[0].leftSide.options[nextItem] = listName; 
     document.forms[0].rightSide.options[rightCurName] = null; 
    } else if (document.forms[0].rightSide.length <= 0) { 
     alert("There are no more options on the right list") 
    } else 
     window.alert("No option is selected on the right side"); 
} 
/* ]]>*/ 
</script> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
<link rel="Stylesheet" type="text/css" /> 
</head> 
<body> 
<h2>This page will switch items between lists</h2> 

<div align="center"> 
    <form action=""> 
     <table border="3"> 
      <tr> 
       <th>Left List</th> 
       <th>Click</th> 
       <th>Right List</th> 
      </tr> 
      <tr> 
       <td> 
        <select name="leftSide" size="6"> 
         <option value="stephanie">Stephanie</option> 
         <option value="beatriz">Beatriz</option> 
         <option value="carol">Carol</option> 
        </select> 
       </td> 
       <td> 
        <input type="button" onclick="moveLeft()" name="leftButton" value="<<" /> <br /> 
        <input type="button" onclick="moveRight()" name="rightButton" value=">>" /> 
       </td> 
       <td> 
        <select name="rightSide" size="6"> 
         <option value="evan">Evan</option> 
         <option value="david">David</option> 
         <option value="mark">Mark</option> 
        </select> 
       </td> 
      </tr> 
     </table> 
    </form> 
</div> 
</body>

Source

2010-02-21 Josh

Vous essayez d'obtenir des propriétés de la propriété selectedIndex de la liste, qui est un nombre. Vous voulez l'obtenir de theList.options[theList.selectedIndex].

EDIT: En outre, vos variables sont nommées de manière plutôt confuse. Essayez ceci:

var list = document.forms[0].rightSide; 
var index = list.selectedIndex; 
var text = list.options[index].text; 
var value = list.options[index].value;

Et l'une des choses les plus frappantes: vos deux fonctions sont fondamentalement les mêmes. Donnez la liste source et la liste cible en tant que paramètres à une fonction générale move().

Source

2010-02-21 19:59:52 janmoesen

Merci. Je suis passé et je l'ai réparé. – Josh

idk pourquoi le code est tellement foiré. Voici les fonctions:

Aller à gauche:

function moveLeft() { 
var rightCurText = document.forms[0].rightSide.selectedIndex.text; 
var rightCurValue = document.forms[0].rightSide.selectedIndex.value; 
var rightCurName = document.forms[0].rightSide.selectedIndex; 

if (rightCurName != -1) { 
    var listName = new Option(); 
    listName.text = rightCurText; 
    listName.value = rightCurValue; 
    nextItem = document.forms[0].leftSide.length; 
    document.forms[0].leftSide.options[nextItem] = listName; 
    document.forms[0].rightSide.options[rightCurName] = null; 
} 
else if (document.forms[0].rightSide.length <= 0) { 
    alert("There are no more options on the right list") 
} 
else 
    window.alert("No option is selected on the right side"); 
}

Déplacer droite:

function moveRight() { 
var leftCurText = document.forms[0].leftSide.selectedIndex.text; 
var leftCurValue = document.forms[0].leftSide.selectedIndex.value; 
var leftCurName = document.forms[0].leftSide.selectedIndex; 

if (leftCurName != -1) {   
    var listName = new Option(); 
    listName.text = leftCurText; 
    listName.value = leftCurValue; 
    nextItem = document.forms[0].rightSide.length; 
    document.forms[0].rightSide.options[nextItem] = listName; 
    document.forms[0].leftSide.options[leftCurName] = null; 
} 
else if (document.forms[0].leftSide.length <= 0) { 
    window.alert("There are no more options in the left list") 
} 
else 
    window.alert("No option is selected on the left side"); 
}

Source

2010-02-21 19:44:35 Josh

Changement d'éléments de menu entre deux listes en utilisant des boutons en JavaScript

Répondre

Questions connexes