在列表框之間移動項目

Question

我在頁面上有兩個列表框，&我需要藉助javascript在它們之間移動項目。 這是我的標記：

<asp:ListBox ID="ListBox1" Height="300px" runat="server" AppendDataBoundItems="true" 
     SelectionMode="Multiple"></asp:ListBox> 

<div> 

<asp:ImageButton ID="ButtonRight" runat="server" ImageUrl="~/Images/right.gif" OnClientClick="return  
     LeftToRightMoveItems('AddSetup');" /><br /> 
<br /> 
<asp:ImageButton ID="ButtonLeft" runat="server" ImageUrl="~/Images/left.gif" OnClientClick="return 
     RightToLeftMoveItems('AddSetup');" /> 
</div> 

<asp:ListBox ID="ListBox2" Height="300px" runat="server" AppendDataBoundItems="true" 
     SelectionMode="Multiple"></asp:ListBox> 

這裏是我的javascript代碼：

的Javascript：

function LeftToRightMoveItems() { 
     try { 
      if (status == "AddSetup") { 
       var varFromBox = document.getElementById("<%=ListBox1.ClientID%>").options; 
       var varToBox = document.getElementById("<%=ListBox2.ClientID%>").options; 
      } 

      alert(varFromBox.length); 
      alert(varToBox.length); 

      if ((varFromBox != null)) { 
       if (varFromBox.length < 1) { 
        alert('There are no items to move!'); 
        return false; 
       } 
       if (varFromBox.options.selectedIndex == -1) // when no Item is selected the index will be -1 
       { 
        alert('Please select an item to move!'); 
        return false; 
       } 
       while (varFromBox.options.selectedIndex >= 0) { 
        var newOption = new Option(); // Create a new instance of ListItem 
        newOption.text = varFromBox.options[varFromBox.options.selectedIndex].text; 
        newOption.value = varFromBox.options[varFromBox.options.selectedIndex].value; 
        varToBox.options[varToBox.length] = newOption; //Append the item in Target Listbox 
        varFromBox.remove(varFromBox.options.selectedIndex); //Remove the item from Source Listbox 
       } 
      } 
     } 
     catch (e) { 
      alert("Following error occured : \n" + e.description); 
     } 
     return false; 
    } 

在頁面加載，我填寫ListBox1項目。但在alert()我收到0項。

HTML看起來像：

<SELECT style="HEIGHT: 300px" id=ListBox1 multiple size=4 name=ctl00$ContentPlaceHolderNewSys$TabContainerMain$tabPanelAdd$tabContainerInnerAdd$tabPanelAdd_1$ListBoxAll1> <OPTION value=1>param1</OPTION> <OPTION value=2>param2</OPTION> <OPTION value=3>param3</OPTION></SELECT> 

Answer 1

功能不接受狀態參數。修改函數的簽名以接受status作爲參數。

function LeftToRightMoveItems(status) { 
... 
} 

提供狀態後，代碼也存在一些問題。主要出現的情況是varFromBox被用作select，當它實際上表示一個選項數組時。

例如，varFromBox最初聲明爲對象的數組：

var varFromBox = document.getElementById("<%=ListBox1.ClientID%>").options; 

然後在不同的地方代碼試圖訪問的選項屬性，彷彿varFromBox是一個選擇元件。在現實中它實際上是在尋找options.options

while (varFromBox.options.selectedIndex >= 0) {..} 

這裏是我想出了否定這些問題。我刪除了try/catch，所以任何錯誤都更明顯。此外結帳這個例子：http://jsfiddle.net/7dVyq/

function LeftToRightMoveItems(status){ 

       if (status == "AddSetup") { 
        var varFromBox = document.getElementById("ListBox1").options; 
        var varToBox = document.getElementById("ListBox2"); 
       } 

       alert(varFromBox.length); 
       alert(varToBox.length); 

       if ((varFromBox != null)) { 
        if (varFromBox.length < 1) { 
         alert('There are no items to move!'); 
         return false; 
        } 
        console.log(varFromBox.selectedIndex); 
        if (varFromBox.selectedIndex == -1) // when no Item is selected the index will be -1 
        { 
         alert('Please select an item to move!'); 
         return false; 
        } 
        for (var i = 0; i < varFromBox.length; i++) { 
         if (varFromBox[i].selectedIndex != -1) { 
          var newOption = new Option(); // Create a new instance of ListItem 
          newOption.text = varFromBox[i].text; 
          newOption.value = varFromBox[i].value; 
          varToBox.options[varToBox.length] = newOption; //Append the item in Target Listbox 
          document.getElementById("ListBox1").remove(varFromBox[i]); //Remove the item from Source Listbox 
         } 
        } 
        return false; 
       } 
      }