Asp.net Javascript避免DropDownList中基于其他DropDownList的重复值

Question

我有一个10 DropdownList，我想避免重复，问题是，如果我随机选择dropdowndownlist第七个下拉列表我选择六，下面剩下的下拉列表将出现1我想避免，我想要的是如果出现重复值，则删除重复值或设置为null，这是我的代码，希望您可以帮助使用javascript enter image description here ......

<div>
    <table>
    <asp:DropDownList ID = "ddl1" runat="server"  >
        <asp:ListItem Value=""></asp:ListItem>
        <asp:ListItem Value="1">1</asp:ListItem>
        <asp:ListItem Value="2">2</asp:ListItem>
        <asp:ListItem Value="3">3</asp:ListItem>
        <asp:ListItem Value="4">4</asp:ListItem>
         <asp:ListItem Value="5">5</asp:ListItem>
         <asp:ListItem Value="6">6</asp:ListItem>
         <asp:ListItem Value="7">7</asp:ListItem>
         <asp:ListItem Value="8">8</asp:ListItem>
         <asp:ListItem Value="9">9</asp:ListItem>
         <asp:ListItem Value="10">10</asp:ListItem>            
    </asp:DropDownList>
    <asp:DropDownList ID = "ddl2" runat="server" >
       <asp:ListItem Value=""></asp:ListItem>
        <asp:ListItem Value="1">1</asp:ListItem>
        <asp:ListItem Value="2">2</asp:ListItem>
        <asp:ListItem Value="3">3</asp:ListItem>
        <asp:ListItem Value="4">4</asp:ListItem>
         <asp:ListItem Value="5">5</asp:ListItem>
         <asp:ListItem Value="6">6</asp:ListItem>
         <asp:ListItem Value="7">7</asp:ListItem>
         <asp:ListItem Value="8">8</asp:ListItem>
         <asp:ListItem Value="9">9</asp:ListItem>
         <asp:ListItem Value="10">10</asp:ListItem>   
    </asp:DropDownList>
    <asp:DropDownList ID = "ddl3" runat="server" >
       <asp:ListItem Value=""></asp:ListItem>
        <asp:ListItem Value="1">1</asp:ListItem>
        <asp:ListItem Value="2">2</asp:ListItem>
        <asp:ListItem Value="3">3</asp:ListItem>
        <asp:ListItem Value="4">4</asp:ListItem>
         <asp:ListItem Value="5">5</asp:ListItem>
         <asp:ListItem Value="6">6</asp:ListItem>
         <asp:ListItem Value="7">7</asp:ListItem>
         <asp:ListItem Value="8">8</asp:ListItem>
         <asp:ListItem Value="9">9</asp:ListItem>
         <asp:ListItem Value="10">10</asp:ListItem>     
    </asp:DropDownList>
    <asp:DropDownList ID = "ddl4" runat="server" >
       <asp:ListItem Value=""></asp:ListItem>
        <asp:ListItem Value="1">1</asp:ListItem>
        <asp:ListItem Value="2">2</asp:ListItem>
        <asp:ListItem Value="3">3</asp:ListItem>
        <asp:ListItem Value="4">4</asp:ListItem>
         <asp:ListItem Value="5">5</asp:ListItem>
         <asp:ListItem Value="6">6</asp:ListItem>
         <asp:ListItem Value="7">7</asp:ListItem>
         <asp:ListItem Value="8">8</asp:ListItem>
         <asp:ListItem Value="9">9</asp:ListItem>
         <asp:ListItem Value="10">10</asp:ListItem>   
    </asp:DropDownList>
    <asp:DropDownList ID = "ddl5" runat="server" >
       <asp:ListItem Value=""></asp:ListItem>
        <asp:ListItem Value="1">1</asp:ListItem>
        <asp:ListItem Value="2">2</asp:ListItem>
        <asp:ListItem Value="3">3</asp:ListItem>
        <asp:ListItem Value="4">4</asp:ListItem>
         <asp:ListItem Value="5">5</asp:ListItem>
         <asp:ListItem Value="6">6</asp:ListItem>
         <asp:ListItem Value="7">7</asp:ListItem>
         <asp:ListItem Value="8">8</asp:ListItem>
         <asp:ListItem Value="9">9</asp:ListItem>
         <asp:ListItem Value="10">10</asp:ListItem>   
    </asp:DropDownList>
         <asp:DropDownList ID = "ddl6" runat="server" >
       <asp:ListItem Value=""></asp:ListItem>
        <asp:ListItem Value="1">1</asp:ListItem>
        <asp:ListItem Value="2">2</asp:ListItem>
        <asp:ListItem Value="3">3</asp:ListItem>
        <asp:ListItem Value="4">4</asp:ListItem>
         <asp:ListItem Value="5">5</asp:ListItem>
         <asp:ListItem Value="6">6</asp:ListItem>
         <asp:ListItem Value="7">7</asp:ListItem>
         <asp:ListItem Value="8">8</asp:ListItem>
         <asp:ListItem Value="9">9</asp:ListItem>
         <asp:ListItem Value="10">10</asp:ListItem>   
    </asp:DropDownList>
         <asp:DropDownList ID = "ddl7" runat="server" >
       <asp:ListItem Value=""></asp:ListItem>
        <asp:ListItem Value="1">1</asp:ListItem>
        <asp:ListItem Value="2">2</asp:ListItem>
        <asp:ListItem Value="3">3</asp:ListItem>
        <asp:ListItem Value="4">4</asp:ListItem>
         <asp:ListItem Value="5">5</asp:ListItem>
         <asp:ListItem Value="6">6</asp:ListItem>
         <asp:ListItem Value="7">7</asp:ListItem>
         <asp:ListItem Value="8">8</asp:ListItem>
         <asp:ListItem Value="9">9</asp:ListItem>
         <asp:ListItem Value="10">10</asp:ListItem>   
    </asp:DropDownList>
         <asp:DropDownList ID = "ddl8" runat="server"  >
       <asp:ListItem Value=""></asp:ListItem>
        <asp:ListItem Value="1">1</asp:ListItem>
        <asp:ListItem Value="2">2</asp:ListItem>
        <asp:ListItem Value="3">3</asp:ListItem>
        <asp:ListItem Value="4">4</asp:ListItem>
         <asp:ListItem Value="5">5</asp:ListItem>
         <asp:ListItem Value="6">6</asp:ListItem>
         <asp:ListItem Value="7">7</asp:ListItem>
         <asp:ListItem Value="8">8</asp:ListItem>
         <asp:ListItem Value="9">9</asp:ListItem>
         <asp:ListItem Value="10">10</asp:ListItem>   
    </asp:DropDownList>
         <asp:DropDownList ID = "ddl9" runat="server"  >
       <asp:ListItem Value=""></asp:ListItem>
        <asp:ListItem Value="1">1</asp:ListItem>
        <asp:ListItem Value="2">2</asp:ListItem>
        <asp:ListItem Value="3">3</asp:ListItem>
        <asp:ListItem Value="4">4</asp:ListItem>
         <asp:ListItem Value="5">5</asp:ListItem>
         <asp:ListItem Value="6">6</asp:ListItem>
         <asp:ListItem Value="7">7</asp:ListItem>
         <asp:ListItem Value="8">8</asp:ListItem>
         <asp:ListItem Value="9">9</asp:ListItem>
         <asp:ListItem Value="10">10</asp:ListItem>   
    </asp:DropDownList>
         <asp:DropDownList ID = "ddl10" runat="server"  >
       <asp:ListItem Value=""></asp:ListItem>
        <asp:ListItem Value="1">1</asp:ListItem>
        <asp:ListItem Value="2">2</asp:ListItem>
        <asp:ListItem Value="3">3</asp:ListItem>
        <asp:ListItem Value="4">4</asp:ListItem>
         <asp:ListItem Value="5">5</asp:ListItem>
         <asp:ListItem Value="6">6</asp:ListItem>
         <asp:ListItem Value="7">7</asp:ListItem>
         <asp:ListItem Value="8">8</asp:ListItem>
         <asp:ListItem Value="9">9</asp:ListItem>
         <asp:ListItem Value="10">10</asp:ListItem>   
    </asp:DropDownList>
        </table>
    <asp:Button ID="btnSave" runat="server" Text="Save"    
         OnClick="btnSave_Click" />
    <asp:Label ID="lblmsg" runat="server"></asp:Label>
</div>
</form>

        <script type="text/javascript">

   var Lists = [
        document.getElementById("ddl1"),
        document.getElementById("ddl2"),
        document.getElementById("ddl3"),
        document.getElementById("ddl4"),
        document.getElementById("ddl5"),
        document.getElementById("ddl6"),
        document.getElementById("ddl7"),
        document.getElementById("ddl8"),
        document.getElementById("ddl9"),
        document.getElementById("ddl10")

   ],
        nbLists = Lists.length;


   // Binds change events to each list
   for (var iList = 0; iList < nbLists; iList++) {
       Lists[iList].onchange = RemoveItems(iList);
   }


   function RemoveItems(iList) {
       return function () {
           var value = [];

           // Add the selected items of all previous lists including the one changed
           for (var jList = 0; jList <= iList; jList++) value.push(Lists[jList].options[Lists[jList].selectedIndex].text);


           // Hide in all succeeding lists these items
           for (var kList = iList + 1; kList < nbLists; kList++)
               HideItems(kList, value);
       }
   }


   // Hide items selected in previous lists in all next lists
   function HideItems(iList, value) {
       var nbOptions = Lists[iList].options.length,
           nbValues = value.length,
           found;

       if (nbValues === 0) return;

       for (var iOption = 0; iOption < nbOptions; iOption++) {
           // Find if this element is present in the previous lists
           found = false;
           for (var iValue = 0; iValue < nbValues; iValue++) {
               if (Lists[iList].options[iOption].text === value[iValue]) {
                   found = true;
                   break;
               }
           }

           // If found, we hide it
           if (found) {
               Lists[iList].options[iOption].style.display = "none";
               Lists[iList].options[iOption].selected = "";
           }
               // else we un-hide it (in case it was previously hidden)
           else
               Lists[iList].options[iOption].style.display = "";
       }
   }
        </script>

 

Answer 1

为什么不先使用CustomValidator使用clienside验证？

        <asp:DropDownList ID="ddl1" runat="server">
            <asp:ListItem Text="1" Value="1"></asp:ListItem>
            <asp:ListItem Text="2" Value="2"></asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="ddl2" runat="server">
            <asp:ListItem Text="1" Value="1"></asp:ListItem>
            <asp:ListItem Text="2" Value="2"></asp:ListItem>
        </asp:DropDownList>

        <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
        <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="There are duplicate values" ClientValidationFunction="noDuplicates"></asp:CustomValidator>

        <script type="text/javascript">
            function noDuplicates(oSrc, args) {
                var ddl1 = document.getElementById('<%= ddl1.ClientID %>').selectedIndex;
                var ddl2 = document.getElementById('<%= ddl2.ClientID %>').selectedIndex;

                if (ddl1 != ddl2) {
                    args.IsValid = true;
                } else {
                    args.IsValid = false;
                }
            }
        </script>