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

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

ID 必须是唯一的，否则将无法正常工作。当您在删除原始选项之前添加新选项时，您会得到两个具有相同 id 的选项，并且当您想要删除它时将找不到原始选项。

只需交换这三行，以便在添加新选项之前删除该选项。从此：

destination.appendChild(optionTag);
var rmv = document.getElementById("multiple"+id);
rmv.parentNode.removeChild(rmv);

到这里：

var rmv = document.getElementById("multiple"+id);
rmv.parentNode.removeChild(rmv);
destination.appendChild(optionTag);

Answer 2

这是一种非常啰嗦的做事方式！ :-)

您可以将一个选项从一个选择移动到另一个选择，只需将其分配为另一个选择的子项，例如

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 复选框，您只需将它们全部移动，或者（最好）您可以使用单击侦听器在独立于单击时选择/取消选择所有适当的选项移动功能。