1

我有一个页面，可以让人们将项目分配给一个类别和 javascript，让用户可以根据需要将任意数量的项目从左侧的一个框移动到右侧的一个框并返回，以便用户可以预览和微调选择（最终在右框中）。如果可以在列表而不是列表框之间移动项目可能会更好，但我想选择框适合在单击时选择。用户完成后，我需要将右侧框中的项目发布到 php 脚本。但是，我无法弄清楚如何捕获正确列表中的所有项目。脚本中没有表单，因此无法从 document.form 中获取。项目并没有真正被选中，它们只是填充列表，我想全部获取。是否有包含整个列表的变量？脚本很长，所以这里有一些可以工作的函数。本质上，我需要一种方法来在最后的右框中写出元素列表。感谢您的任何建议。

   function moveToRightOrLeft(side) {
    var listLeft = document.getElementById('selectLeft');
    var listRight = document.getElementById('selectRight');
    if (side == 1) {
        if (listLeft.options.length == 0) {
            alert('You have already assigned all items to the category');
            return false;
        } else {
            var selectedItem = listLeft.options.selectedIndex;
            move(listRight, listLeft.options[selectedItem].value, listLeft.options[selectedItem].text);
            listLeft.remove(selectedItem);
            if (listLeft.options.length > 0) {
                listLeft.options[0].selected = true;
            }
        }
    } else if (side == 2) {
        if (listRight.options.length == 0) {
            alert('The list is empty');
            return false;
        } else {
            var selectedItem = listRight.options.selectedIndex;
            move(listLeft, listRight.options[selectedItem].value, listRight.options[selectedItem].text);
            listRight.remove(selectedItem);
            if (listRight.options.length > 0) {
                listRight.options[0].selected = true;
            }
        }
    }
}

function move(listBoxTo, optionValue, optionDisplayText) {
    var newOption = document.createElement("option");
    newOption.value = optionValue;
    newOption.text = optionDisplayText;
    listBoxTo.add(newOption, null);
    return true;
}
4

1 回答 1

2

首先，我认为您的语法有错误。要获取选择框的选定项的值，您可以使用以下内容：

var value = listLeft.options[listLeft.selectedIndex].value;

要写出特定选择框中的所有选项，您应该能够执行以下操作：

var options = document.getElementById('selectRight').options;
for (i=0; i<options.length(); i++)
    document.write("value "+ i +" = "+ options[i].value);

我稍微修改了您的代码，这是一个完整的工作示例：

<html>
<head>
    <style type="text/css">
        select
        {
            width:100px;
        }
    </style>
    <script type="text/Javascript">
        function moveToRightOrLeft(side)
        {
            if (side == 1)
            {
                var list1 = document.getElementById('selectLeft');
                var list2 = document.getElementById('selectRight');
            }
            else
            {
                var list1 = document.getElementById('selectRight');
                var list2 = document.getElementById('selectLeft');
            }

            if (list1.options.length == 0)
            {
                alert('The list is empty');
                return false;
            }
            else
            {
                var selectedItem = list1.options[list1.selectedIndex];
                move(list2, selectedItem.value, selectedItem.text);
                list1.remove(list1.selectedIndex);
                if (list1.options.length > 0)
                    list1.options[0].selected = true;
            }
            return true;
        }

        function move(listBoxTo, optionValue, optionDisplayText)
        {
            var newOption = document.createElement("option");
            newOption.value = optionValue;
            newOption.text = optionDisplayText;
            listBoxTo.add(newOption, null);
            return true;
        }

        function showContents(listBoxID)
        {
            var options = document.getElementById(listBoxID).options;
            for (var i = 0; i < options.length; i++)
                alert("Option "+ options[i].value +" = "+ options[i].text);
        }
    </script>
</head>
<body>
    <select id="selectLeft" multiple="multiple">
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
        <option value="3">Value 3</option>
    </select>
    <button onclick="moveToRightOrLeft(2)">&lt;</button>
    <button onclick="moveToRightOrLeft(1)">&gt;</button>
    <select id="selectRight" multiple="multiple">
    </select>
    <button onclick="showContents('selectRight')">Show Contents</button>
</body>
</html>
于 2012-04-26T18:49:40.450 回答