如何使这个JavaScript与多个列表框一起使用？

Question

我想知道如何使用这个脚本来处理多个checkboxcombobox。我有大约8个相同的下拉列表，都有自己的数据源。此脚本适用于一个下拉列表，但是当我添加其他内容时，它不会使用所选值填充其文本框。

以下是我用来处理一个JavaScript的JavaScript ...

// <![CDATA[
var textSeparator = ";";
function OnListBoxSelectionChanged(listBox, args) {
    if (args.index == 0)
        args.isSelected ? listBox.SelectAll() : listBox.UnselectAll();
    UpdateSelectAllItemState();
    UpdateText();
    GetSelection();
}
function UpdateSelectAllItemState() {
    IsAllSelected() ? checkListBox.SelectIndices([0]) : checkListBox.UnselectIndices([0]);
}
function IsAllSelected() {
    var selectedDataItemCount = checkListBox.GetItemCount() - (checkListBox.GetItem(0).selected ? 0 : 1);
    return checkListBox.GetSelectedItems().length == selectedDataItemCount;
}
function UpdateText() {
    var selectedItems = checkListBox.GetSelectedItems();
    checkComboBox.SetText(GetSelectedItemsText(selectedItems));
}
function SynchronizeListBoxValues(dropDown, args) {
    checkListBox.UnselectAll();
    var texts = dropDown.GetText().split(textSeparator);
    var values = GetValuesByTexts(texts);
    checkListBox.SelectValues(values);
    UpdateSelectAllItemState();
    UpdateText(); // for remove non-existing texts
}
function GetSelectedItemsText(items) {
    var texts = [];
    for (var i = 0; i < items.length; i++)
        if (items[i].index != 0)
            texts.push(items[i].text);
    return texts.join(textSeparator);
}
function GetValuesByTexts(texts) {
    var actualValues = [];
    var item;
    for (var i = 0; i < texts.length; i++) {
        item = checkListBox.FindItemByText(texts[i]);
        if (item != null)
            actualValues.push(item.value);
    }
    return actualValues;
}



//]]>

function GetDropDownValue() {
    var mine = document.getElementById("ddl").value;
    //var b = document.getElementById("lbl").innerText = mine;
    var c = document.getElementById("hf").value = mine;
    var d = document.getElementById("ASPxLabel1").innerText;
    var e = document.getElementById("hf2").value = d;
}
function GetSelection() {
    var c = document.getElementById("tbRA");
    c.innerText = checkListBox.GetSelectedValues();

    UpdateText();
}

这是我的列表框（这些是带有列表框和复选框的DevExpress DropDownEdit）。我需要让脚本适用于所有这些。

    <td width="125px">
    <dx:ASPxDropDownEdit ID="xddeRegion" runat="server" AnimationType="None" ClientInstanceName="checkComboBox" Width="210px">
        <DropDownWindowTemplate>
            <dx:ASPxListBox ID="listBox1" runat="server" ClientInstanceName="checkListBox" SelectionMode="CheckColumn" Width="100%">
                <Border BorderStyle="None" />
                <BorderBottom BorderColor="#DCDCDC" BorderStyle="Solid" BorderWidth="1px" />
                <Items>
                </Items>
                <ClientSideEvents SelectedIndexChanged="OnListBoxSelectionChanged" />
            </dx:ASPxListBox>
            <table style="width: 100%">
                <tr>
                    <td style="padding: 4px">
                        <dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Style="float: right" Text="Close">
                            <ClientSideEvents Click="function(s, e){ checkComboBox.HideDropDown(); }" />
                        </dx:ASPxButton>
                    </td>
                </tr>
            </table>
        </DropDownWindowTemplate>
        <ClientSideEvents DropDown="SynchronizeListBoxValues" TextChanged="SynchronizeListBoxValues" />
        <DropDownWindowStyle BackColor="#EDEDED">
        </DropDownWindowStyle>
    </dx:ASPxDropDownEdit>
</td>
<td width="200px">
    <div style="width: 200px; height: 5px;">
    </div>
</td>
<td>
    <asp:Label ID="lblA" runat="server" Text="Region" Width="100px"></asp:Label>
</td>
<td></td>
</tr>
<tr class="OtherRow">
<td>
    <asp:Label ID="Label1" Text="Cluster:" runat="server"></asp:Label>
</td>
<td>
    <dx:ASPxDropDownEdit ID="xddeCluster" runat="server" AnimationType="None" ClientInstanceName="checkComboBox" Width="210px">
        <DropDownWindowTemplate>
            <dx:ASPxListBox ID="listBox1" runat="server" ClientInstanceName="checkListBox" SelectionMode="CheckColumn" Width="100%">
                <Border BorderStyle="None" />
                <BorderBottom BorderColor="#DCDCDC" BorderStyle="Solid" BorderWidth="1px" />
                <Items>
                </Items>
                <ClientSideEvents SelectedIndexChanged="OnListBoxSelectionChanged" />
            </dx:ASPxListBox>
            <table style="width: 100%">
                <tr>
                    <td style="padding: 4px">
                        <dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Style="float: right" Text="Close">
                            <ClientSideEvents Click="function(s, e){ checkComboBox.HideDropDown(); }" />
                        </dx:ASPxButton>
                    </td>
                </tr>
            </table>
        </DropDownWindowTemplate>
        <ClientSideEvents DropDown="SynchronizeListBoxValues" TextChanged="SynchronizeListBoxValues" />
        <DropDownWindowStyle BackColor="#EDEDED">
        </DropDownWindowStyle>
    </dx:ASPxDropDownEdit>
</td>
<td></td>
<td>
    <asp:Label ID="Label6" runat="server" Text="AMU:" Width="100px"></asp:Label>
</td>
<td>
    <dx:ASPxDropDownEdit ID="xddeAMU" runat="server" AnimationType="None" ClientInstanceName="checkComboBox" Width="210px">
        <DropDownWindowTemplate>
            <dx:ASPxListBox ID="listBox1" runat="server" ClientInstanceName="checkListBox" SelectionMode="CheckColumn" Width="100%">
                <Border BorderStyle="None" />
                <BorderBottom BorderColor="#DCDCDC" BorderStyle="Solid" BorderWidth="1px" />
                <Items>
                </Items>
                <ClientSideEvents SelectedIndexChanged="OnListBoxSelectionChanged" />
            </dx:ASPxListBox>
            <table style="width: 100%">
                <tr>
                    <td style="padding: 4px">
                        <dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Style="float: right" Text="Close">
                            <ClientSideEvents Click="function(s, e){ checkComboBox.HideDropDown(); }" />
                        </dx:ASPxButton>
                    </td>
                </tr>
            </table>
        </DropDownWindowTemplate>
        <ClientSideEvents DropDown="SynchronizeListBoxValues" TextChanged="SynchronizeListBoxValues" />
        <DropDownWindowStyle BackColor="#EDEDED">
        </DropDownWindowStyle>
    </dx:ASPxDropDownEdit>
</td>
</tr>
<tr class="AltRow">
<td>
    <asp:Label ID="Label2" Text="Country:" runat="server"></asp:Label>
</td>
<td>
    <dx:ASPxDropDownEdit ID="xddeCountry" runat="server" AnimationType="None" ClientInstanceName="checkComboBox" Width="210px">
        <DropDownWindowTemplate>
            <dx:ASPxListBox ID="listBox1" runat="server" ClientInstanceName="checkListBox" SelectionMode="CheckColumn" Width="100%">
                <Border BorderStyle="None" />
                <BorderBottom BorderColor="#DCDCDC" BorderStyle="Solid" BorderWidth="1px" />
                <Items>
                </Items>
                <ClientSideEvents SelectedIndexChanged="OnListBoxSelectionChanged" />
            </dx:ASPxListBox>
            <table style="width: 100%">
                <tr>
                    <td style="padding: 4px">
                        <dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Style="float: right" Text="Close">
                            <ClientSideEvents Click="function(s, e){ checkComboBox.HideDropDown(); }" />
                        </dx:ASPxButton>
                    </td>
                </tr>
            </table>
        </DropDownWindowTemplate>
        <ClientSideEvents DropDown="SynchronizeListBoxValues" TextChanged="SynchronizeListBoxValues" />
        <DropDownWindowStyle BackColor="#EDEDED">
        </DropDownWindowStyle>
    </dx:ASPxDropDownEdit>
</td>
<td></td>
<td>
    <asp:Label ID="Label7" runat="server" Text="LMU:" Width="100px"></asp:Label>
</td>
<td>
    <dx:ASPxDropDownEdit ID="xddeLMU" runat="server" AnimationType="None" ClientInstanceName="checkComboBox" Width="210px">
        <DropDownWindowTemplate>
            <dx:ASPxListBox ID="listBox1" runat="server" ClientInstanceName="checkListBox" SelectionMode="CheckColumn" Width="100%">
                <Border BorderStyle="None" />
                <BorderBottom BorderColor="#DCDCDC" BorderStyle="Solid" BorderWidth="1px" />
                <Items>
                </Items>
                <ClientSideEvents SelectedIndexChanged="OnListBoxSelectionChanged" />
            </dx:ASPxListBox>
            <table style="width: 100%">
                <tr>
                    <td style="padding: 4px">
                        <dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Style="float: right" Text="Close">
                            <ClientSideEvents Click="function(s, e){ checkComboBox.HideDropDown(); }" />
                        </dx:ASPxButton>
                    </td>
                </tr>
            </table>
        </DropDownWindowTemplate>
        <ClientSideEvents DropDown="SynchronizeListBoxValues" TextChanged="SynchronizeListBoxValues" />
        <DropDownWindowStyle BackColor="#EDEDED">
        </DropDownWindowStyle>
    </dx:ASPxDropDownEdit>
</td>
</tr>
<tr class="OtherRow">
<td>
    <asp:Label ID="Label3" Text="District:" runat="server"></asp:Label>
</td>
<td>
    <dx:ASPxDropDownEdit ID="xddeDistrict" runat="server" AnimationType="None" ClientInstanceName="checkComboBox" Width="210px">
        <DropDownWindowTemplate>
            <dx:ASPxListBox ID="listBox1" runat="server" ClientInstanceName="checkListBox" SelectionMode="CheckColumn" Width="100%">
                <Border BorderStyle="None" />
                <BorderBottom BorderColor="#DCDCDC" BorderStyle="Solid" BorderWidth="1px" />
                <Items>
                </Items>
                <ClientSideEvents SelectedIndexChanged="OnListBoxSelectionChanged" />
            </dx:ASPxListBox>
            <table style="width: 100%">
                <tr>
                    <td style="padding: 4px">
                        <dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Style="float: right" Text="Close">
                            <ClientSideEvents Click="function(s, e){ checkComboBox.HideDropDown(); }" />
                        </dx:ASPxButton>
                    </td>
                </tr>
            </table>
        </DropDownWindowTemplate>
        <ClientSideEvents DropDown="SynchronizeListBoxValues" TextChanged="SynchronizeListBoxValues" />
        <DropDownWindowStyle BackColor="#EDEDED">
        </DropDownWindowStyle>
    </dx:ASPxDropDownEdit>
</td>