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 循环后退，因为选项集合是一个实时NodeList，因此删除选项会缩短集合。如果你继续前进，你需要随时更新索引和长度（所以后退更简单）。

您可能希望包含某种排序或排序（例如，通过值或文本）。

我想如果选中了 selectAll 复选框，你只需将它们全部移动，或者（最好）你可以使用点击监听器来选择/取消选择所有相应的optoins，当它被点击时独立于移动功能。

Answer 2

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

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

2 个答案: