将元素从列表框移动到另一个列表框

Question

大家好日子.

我需要这样做.我有2个列表框,当按下按钮时,我需要将一个选项从一个移动到另一个.

我这样做了:

HTML:

       <table border="1" cellpadding="5">
            <tr>
                <td>
                    Un-Selected <br />
                    <select multiple="multiple" id="selectBoxOne" size="5" class="selectListBox">
                        <option value="0" id="multiple0">Option 0</option>
                        <option value="1" id="multiple1">Option 1</option>
                        <option value="2" id="multiple2">Option 2</option>
                        <option value="3" id="multiple3">Option 3</option>
                        <option value="4" id="multiple4">Option 4</option>
                        <option value="5" id="multiple5">Option 5</option>
                    </select>
                    <br />
                    <input type="checkbox" id="selectAllFirst"/>Select All or Ctrl+Click
                </td>
                <td>
                    <div onclick="move('left');"> << </div>
                    <div onclick="move('right');"> >> </div>
                </td>
                <td>
                    Selected <br />
                    <select name="policyCode" multiple="multiple" id="selectBoxSecond" size="5" class="selectListBox">

                    </select>
                    <br />
                    <input type="checkbox" id="selectAllSecond"/>Select All or Ctrl+Click
                </td>


            </tr>
        </table>

JavaScript的:

// Declare elements

var selectOptions = Array();
selectOptions[0] = "Option 0";
selectOptions[1] = "Option 1";
selectOptions[2] = "Option 2";
selectOptions[3] = "Option 3";
selectOptions[4] = "Option 4";
selectOptions[5] = "Option 5";

// function to move an element from a box to the other
function move(sens)
{               
    if (sens == "right")
    {
        var selObj = document.getElementById('selectBoxOne');    
        var chkAll = document.getElementById("selectAllFirst")
        var destination = document.getElementById("selectBoxSecond");
    }
    else
    {
        var selObj = document.getElementById('selectBoxSecond');    
        var chkAll = document.getElementById("selectAllSecond")
        var destination = document.getElementById("selectBoxOne");
    }
    var selectedArray = new Array();        
    var i;
    var count = 0;
    if (chkAll.checked == 1)
    {
        for (i = 0; i<selectOptions.length; i++)
        {
            selectedArray[i] = i;
        }
    }
    else
    {            
        for (i=0; i<selObj.options.length; i++) {
            if (selObj.options[i].selected) {
                selectedArray[count] = selObj.options[i].value;
            count++;
            }
        }            
    }

    for (i = 0; i < selectedArray.length; i++)
    {
        var optionTag = document.createElement("option");
        id = selectedArray[i];
        optionTag.innerHTML = selectOptions[id];
        optionTag.value = id;
        optionTag.id = "multiple"+id;
        destination.appendChild(optionTag);
        var rmv = document.getElementById("multiple"+id);
        rmv.parentNode.removeChild(rmv);
    }
}

现在:从左框移动到右框,脚本运行良好.但是,当我尝试相反的方式它崩溃.没有错误返回,但我肯定知道是删除部分(如果我评论它工作正常...除了它生成重复,因为没有删除移动的选项).

更具体地说,这2行:var rmv = document.getElementById("multiple"+ id); rmv.parentNode.removeChild(RMV);

由于没有返回错误,我不知道如何解决这个问题.有任何帮助吗？

Answer 1

这是一个非常漫长的做事方式!:-)

您可以将选项从一个选项移动到另一个选项,只需将其指定为另一个选项的子项,例如

function move(sens) {

  var i, sourceSel, targetSel; 

  if (sens == 'right') {
    sourceSel = document.getElementById('selectBoxOne'); 
    targetSel = document.getElementById('selectBoxSecond');
  } else {
    sourceSel = document.getElementById('selectBoxSecond'); 
    targetSel = document.getElementById('selectBoxOne');
  }

  i = sourceSel.options.length;
  while (i--) {
    if (sourceSel.options[i].selected) {
      targetSel.appendChild(sourceSel.options[i]);
    }
  }
}

将所有选定的选项从一个移动到另一个.请注意,while循环向后,因为options集合是一个实时NodeList,因此删除选项会缩短集合.如果你前进它,你需要随时更新索引和长度(所以后退更简单).

您可能希望包含某种排序或排序(例如,通过值或文本).

我想如果选中selectAll复选框,你只需将它们全部移动,或者(最好)你可以使用一个点击监听器来选择/取消选择所有相应的optoins,而不依赖于移动功能.