Javascript 从左向右动态移动图元选择

我有下面的样品表

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

试试这个-

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

更新： 如果您想在重新加载浏览器时使

选择框保持不变，则必须将其状态存储在浏览器中的某个位置，可以使用
在java脚本中

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

window.onload=function（）{
if（存储）{
var leftSelect=document.forms[“form1”].elements[“leftProcess”]；
var rightSelect=document.forms[“form1”]。elements[“rightProcess”]；
if（localStorage.leftOptions.length>0）{
清除选择（左选择）；
fillSelect（leftSelect，JSON.parse（localStorage.leftOptions））；
}
if（localStorage.rightOptions.length>0）{
清除选择（右选择）；
fillSelect（righselect，JSON.parse（localStorage.rightOptions））；
}否则{
警报（“不支持本地存储”）；
}
}否则{
警报（“不支持”）
}
}
window.onbeforeunload=函数（事件）//刷新前
{
saveCurrentState（document.forms[“form1”].elements[“leftProcess”]、document.forms[“form1”]、elements[“rightProcess”]）；
//返回true；
}
函数saveCurrentState（左选择、右选择）{
if（存储）{
var leftOptions=[]；
对于（var i=0；我在HTML中有表单吗？我遇到一个问题，它可以工作，但当我按下按钮时，它会刷新我的页面，并且所有更新都消失了？
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="";
}