动态移动元素从左到右选择

Question

我有以下样本表。

<form method="post" name="form1" action="addpp.php" enctype="multipart/form-data" onSubmit="return validateForm();">
    <table width="100%">
                   <tr>
                    <td>
                        <select name="leftProcess" size="5">
            <option value="1">Left List Option 1</option>
            <option value="2">Left List Option 2</option>
        </select>
                    </td>
                    <td>
                       <button onclick="moveRight('leftProcess','rightProcess')">>></button><br/>
                       <button onclick="moveLeft('rightProcess','leftProcess')"><<</button>
                    </td>
                    <td>
                        <select name="rightProcess" size="5">
            <option value="1">Left List Option 1</option>
            <option value="2">Left List Option 2</option>
        </select>
                    </td>

                   </tr>

              </table>
</form>

我左右两个选择。在这里，我只是将静态名称放在最后，我将使用动态名称进行更多选择。所以我把这个javascript称为如下。我需要传递名称左右选择。现在唯一的问题是所选择的左侧元素移动到右侧元素并且在此线处停留  document.forms [＆＃34; form1＆＃34;]。elements [myRightId] .add（document.forms [＆＃34; form1＆＃34;]。elements [myLeftId] [selItem]，null）;

function moveRight(leftValue,rightValue)
    {
        //alert("Elft value is t : "+leftValue);
        var myLeftId = leftValue;
        var myRightId = leftValue;
        var selItem = document.forms["form1"].elements[myLeftId].selectedIndex;
    alert("test : "+  document.forms["form1"].elements[myLeftId].options[selItem].value);

    if (selItem == -1) {
        window.alert("You must first select an item on the left side.")
    } else {
        document.forms["form1"].elements[myRightId].add(document.forms["form1"].elements[myLeftId][selItem], null);
    }

    }

Answer 1

试试这个 -

function moveRight(leftValue, rightValue) {
    //alert("Elft value is t : "+leftValue);
    var leftSelect = document.forms["form1"].elements[leftValue];
    var rightSelect = document.forms["form1"].elements[rightValue];
    //alert("test : " + document.forms["form1"].elements[myLeftId].options[selItem].value);
    if (leftSelect.selectedIndex == -1) {
        window.alert("You must first select an item on the left side.")
    } else {
        var option = leftSelect.options[leftSelect.selectedIndex];
        rightSelect.appendChild(option);
    }
}

DEMO

UPDATE：

如果您希望在浏览器重新加载时保持select boxes不变，那么您必须将其状态存储在浏览器的某个位置，这可以使用 java脚本中的Local Storage。

window.onload=function() {
    if (Storage) {
        var leftSelect = document.forms["form1"].elements["leftProcess"];
        var rightSelect = document.forms["form1"].elements["rightProcess"];
        if (localStorage.leftOptions.length>0) {
            clearSelect(leftSelect);
            fillSelect(leftSelect, JSON.parse(localStorage.leftOptions));
        }
        if (localStorage.rightOptions.length>0) {
            clearSelect(rightSelect);
            fillSelect(rightSelect,JSON.parse( localStorage.rightOptions));
        } else {
            alert("local storage not supported");
        }
    }else{
    alert("not supported")
    }
}


window.onbeforeunload = function (event) //before refresh
{
    saveCurrentState(document.forms["form1"].elements["leftProcess"], document.forms["form1"].elements["rightProcess"]);
   // return true;
}

function saveCurrentState(leftSelect, rightSelect) {
    if (Storage) {
       var leftOptions = [];
        for (var i=0;i<leftSelect.options.length;i++) {
            leftOptions.push({
                "value": leftSelect.options[i].value,
                    "innerHTML": leftSelect.options[i].innerHTML
            });
        }
    }
    var rightOptions = [];
    for (var i=0;i<rightSelect.options.length;i++) {
        rightOptions.push({
            "value": rightSelect.options[i].value,
                "innerHTML": rightSelect.options[i].innerHTML
        });
    }
    localStorage.leftOptions=JSON.stringify(leftOptions);
    localStorage.rightOptions=JSON.stringify(rightOptions);
}


function fillSelect(select, options) {
    for (i = 0; i < options.length; i++) {
        var opt = document.createElement('option');
        opt.value = options[i].value;
        opt.innerHTML = options[i].innerHTML;
        select.appendChild(opt);
    }
}

function clearSelect(select) {
   select.innerHTML="";
}

DEMO with LocalStorage