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

我需要这样做。我有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）;

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

来源

2011-08-08 zozo

问：你有没有试图把在第二循环的“删除”：直到你添加完，先不要删除任何东西？ – paulsm4

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

来源

2011-08-08 07:23:26 Guffa

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

只需将其分配为另一个选择的子选项，即可将选项从一个选项移动到另一个选项。

将所有选定的选项从一个移动到另一个。请注意，，而循环往回倒退，因为选项集合是一个活的NodeList，所以随着您删除选项缩短集合。如果你继续前进，你需要随时更新索引和长度（所以后退更简单）。

您可能希望包括某种排序或排序（例如按值或文本）。

我想如果全选复选框被选中，你将只是移动它们，或（最好），你可以使用一个点击监听器来选择/取消选择所有合适的optoins时，它的点击独立的移动功能。

来源

2011-08-08 06:55:45 RobG

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

回答

相关问题