使用 JavaScript 中的按钮在两个列表之间切换菜单项

Question

我有一个我一直在做的学校作业，我完全不知道为什么它会做它正在做的事情。基本上它是一个左选择列表、2 个中间按钮和一个右选择列表。目的是在列表之间移动选项。我的问题如下：在左侧列表中进行了选择，单击了移动到右侧列表按钮，右侧列表中添加了一个名为“未定义”的选项，左侧列表中的选择消失了。我不希望任何人为我做作业，但非常感谢提示和提示。

这是我的代码：

<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>

Answer 1

您正试图从列表的selectedIndex 属性中获取属性，该属性是一个数字。你想从theList.options[theList.selectedIndex]获取它。

编辑： 此外，您的变量命名相当混乱。试试这个：

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

最引人注目的事情之一是：您的两个功能基本相同。将源列表和目标列表作为参数提供给通用 move() 函数。

Answer 2

想知道为什么代码如此混乱。函数如下：

向左移动：

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

向右移动：

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