gunter gunter - 3 months ago 9
Javascript Question

Asp.net Javascript Avoid Duplicate values from DropDownList based On Other DropDownList

I have a 10 DropdownList, I want to avoid duplicates, the problem is that if I choose dropdowndownlist randomly the seventh Dropdownlist I choose six, the following remaining dropdownlist will appear 1 and I want to avoid that, what I want is to remove duplicate values or maybe set to null if duplicate values appears, here is my code I hope you can help with the javascriptenter 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

Why not use clienside validation first with a CustomValidator?

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