0

ページに 2 つのリスト ボックスがあり、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>
4

1 に答える 1

1

この関数はステータス パラメータを受け入れません。パラメータとして受け入れる関数のシグネチャを変更しstatusます。

function LeftToRightMoveItems(status) {
...
}

ステータスが提供されると、コードにもいくつかの問題がありました。主にvarFromBox、実際にはオプションの配列を表すときに が選択として使用されることがありました。

たとえば、varFromBox最初はオブジェクトの配列として宣言されています。

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

そして、さまざまな場所で、コードvarFromBoxは select 要素であるかのように options プロパティにアクセスしようとします。実際には、実際に探しているのは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;
                }
            }
于 2012-12-05T08:09:22.590 に答える