1

カテゴリにアイテムを割り当てることができるページと、ユーザーが選択項目をプレビューして微調整できるように、ユーザーが必要な数のアイテムを左側のボックスから右側のボックスに移動できるページがあります（最終的には右側のボックスになります）。 ）。リストボックスではなくリスト間でアイテムを移動できる方が良いかもしれませんが、選択ボックスは、クリック時に選択するのに適していると思います。ユーザーが完了したら、右のボックスの項目を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 に答える