我有两个带有一些值的列表框(A,B),我可以将值从A发送到B或B到A

时间:2010-05-05 13:38:07

标签: javascript

我有两个带有一些值的列表框(A,B),我可以将值从A发送到B或B到A 我有一个保存按钮。

第一次没有更新任何列表框如果我点击保存按钮我显示的信息如“没有变化或完成”

但是,一旦我将一件物品从A发送到B并再次将同一件物品从B发送到A,则意味着没有更改或完成。在这里我也想显示相同的消息“没有变化或完成”。但我无法很好地了解任何一个请求提供代码或技巧,以找到javascript中列表框的默认状态。

由于

1 个答案:

答案 0 :(得分:0)

我不知道你为什么要用客户端javascript做这个,但这是一个例子: lbClicked是一个js函数,在列表框的项目上调用onclick来删除项目并将它们添加到其他列表框中。最重要的是我在服务器端(Lb1Items和Lb2Items)上注册了两个javascript数组,它们保存了listboxes项的值。当用户单击提交按钮(或任何时候)时,我将每个列表框与相应的数组进行比较。当一切都相同时,没有任何改变。

 function lbClicked(sender){
        var lb1=document.getElementById("ListBox1");
        var lb2=document.getElementById("ListBox2");
        if(lb1 != null && lb2 != null){
            if(sender==lb1){
                var selectedItem=lb1.item(lb1.selectedIndex);
                if(! contains(Lb2Items,selectedItem.value)){
                   lb1.remove(lb1.selectedIndex);
                   lb2.add(selectedItem);
                }
            }else if(sender==lb2){
                var selectedItem=lb2.item(lb2.selectedIndex);
                if(! contains(Lb1Items,selectedItem.value)){
                   lb2.remove(lb2.selectedIndex);
                   lb1.add(selectedItem);
                }
            }
        }
    }


    function Button1_onclick() {
        var changed=itemsChanged();
        if(changed)
            alert("Items Changed!");
        else
            alert("Items not changed!");
        return changed;
    }

    function itemsChanged(){
        if(Lb1Items != null && Lb2Items != null){
            var lb1=document.getElementById("ListBox1");
            var lb2=document.getElementById("ListBox2");
            if(lb1 != null && lb2 != null){
                if(lb1.options.length != Lb1Items.length || lb2.options.length != Lb2Items.length)
                    return true;

                for(var i=0; i<lb1.options.length; i++){
                    var item=lb1.options[i];
                    if(! contains(Lb1Items,item.value))
                        return true;
                }
                for(var i=0; i<lb2.options.length; i++){
                    var item=lb2.options[i];
                    if(! contains(Lb2Items,item.value))
                        return true;
                }
            }
        }
        return false;
    }

    function contains(objArray,objectToFind){
        for(var i=0;i<objArray.length;i++){
               if(objArray[i]==objectToFind)
                   return true;
        }
        return false;
    }

使用ASP.Net进行测试:

<form id="form1" runat="server">
        <asp:ListBox ID="ListBox1" runat="server" onclick="javascript:lbClicked(this);" Height="84px">
           <asp:ListItem Text="Item 1" Value="1"></asp:ListItem>
            <asp:ListItem Text="Item 2" Value="2"></asp:ListItem>
            <asp:ListItem Text="Item 3" Value="3"></asp:ListItem>
            <asp:ListItem Text="Item 4" Value="4"></asp:ListItem>
            <asp:ListItem Text="Item 5" Value="5"></asp:ListItem>
        </asp:ListBox>&nbsp;
        <asp:ListBox ID="ListBox2" runat="server" onclick="javascript:lbClicked(this);" Height="82px">
            <asp:ListItem Text="Item 6" Value="6"></asp:ListItem>
            <asp:ListItem Text="Item 7" Value="7"></asp:ListItem>
            <asp:ListItem Text="Item 8" Value="8"></asp:ListItem>
            <asp:ListItem Text="Item 9" Value="9"></asp:ListItem>
            <asp:ListItem Text="Item 10" Value="10"></asp:ListItem>
        </asp:ListBox>
        &nbsp;
        <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
    </form>

并且数组在服务器端以这种方式注册:

 ClientScript.RegisterArrayDeclaration("Lb1Items", "1,2,3,4,5")
 ClientScript.RegisterArrayDeclaration("Lb2Items", "6,7,8,9,10")

此致 添

编辑:在itemsChanged-function中添加了相同数量的项目检查,并检查目标列表框是否已包含要转移的项目