Switching menu items between two lists using buttons in JavaScript

StackOverflow https://stackoverflow.com/questions/2307193

Question

I have this school assignment that I've been working on and am totally stumped as to why it's doing what it's doing. Basically it's a left selection list, 2 middle buttons, and a right selection list. The purpose is to move options between lists. My problem is as follows: a selection is made on left list, the move to right list button is clicked, an option is added to the right list named "undefined" and the selection on the left list disappears. I don't want anyone to do my homework for me, but tips and hints are greatly appreciated.

Here's my 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>
Was it helpful?

Solution

You are trying to get properties from the selectedIndex property of the list, which is a number. You want to get it from theList.options[theList.selectedIndex].

EDIT: Also, your variables are named rather confusingly. Try this:

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

And one of the most striking things: your two functions are basically the same. Give the source list and target list as parameters to a general move() function.

OTHER TIPS

Idk why the code is so messed up. Here's the functions:

Move Left:

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");
}

Move Right:

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");
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top