Question

我有一个页面，可以让人们将项目分配到一个类别和javascript，让用户可以根据需要从左边的一个框移动到右边和后面的一个项目，以便用户可以预览和微调选择（最终在右边框中）。如果项目可以在列表而不是列表框之间移动可能会更好，但我认为选择框可以选择onclick。用户完成后，我需要将右侧框中的项目发布到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;
}

Answer 1

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

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>

javascript捕获php的所有列表框值

1 个答案: