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

Dynamically moving elements from left to right select

本文关键字：行选 选择 元素 动态 移动 从左到右      更新时间：2023-09-26

我有下面的示例表。

<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["form1"].elements[myRightId].add（document.forms]"form1"].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);
    }
    }

试试这个-

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

演示

更新：

如果你想在重新加载浏览器时使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="";
}

带LocalStorage的DEMO

相关文章：