목록 상자간에 항목 이동하기

Question

내 페이지에 두 개의 목록 상자가 있습니다. & 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의 항목을 작성하고있어

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

가 여기 내 자바 스크립트 코드입니다 : 이 내 마크 업입니다. 하지만 alert()에 0 개의 항목이 있습니다. 이 기능은 상태 매개 변수를 허용하지 않습니다

<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

: 같은

HTML 보인다. 함수의 서명을 수정하여 status을 매개 변수로 사용하십시오.

function LeftToRightMoveItems(status) { 
... 
} 

상태가 제공되면 코드에 몇 가지 문제가 있습니다. 주로 varFromBox이 실제로 옵션 집합을 나타낼 때 선택 항목으로 사용 된 경우가있었습니다.

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

을 그리고 varFromBox는 선택 요소 인 것처럼 다음 다른 장소에있는 코드는 옵션 속성에 액세스하려고 시도합니다 : 예를 들어

, varFromBox는 처음 객체의 배열로 선언됩니다. 실제로는 실제로 여기에 options.options

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

을 찾는 것은 내가이 문제를 부정하는 해낸 것입니다. try/catch를 제거하여 오류가 더 분명해졌습니다. 당신이이 문제를 디버깅하는 데 유용 할 것이다 페이지로드 후 브라우저에서 HTML 소스를 게시 할 수있는 경우 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; 
       } 
      }