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

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

现在:从左框移动到右框，脚本效果很好。但是当我尝试另一种方法时，它会崩溃。没有返回错误，但我确定是删除部分(如果我评论它，它工作正常......除了它生成重复项，因为没有删除移动的选项)。

更具体地说，这两行:var rmv = document.getElementById("多个"+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 复选框，您只需将它们全部移动，或者(最好)您可以使用点击监听器在点击时独立于移动功能。