detect duplicate value selected in dropdownlist using javascript or jquery?

Question

I have a dropdownlist inside a repeater.And this Dropdownlist comes in every record display in repeater.I want there should no duplicate values be selected from dropdown on client side only.My Code is

<asp:Repeater ID="rep_hello" runat="server">
                    <ItemTemplate>
                        <asp:Label ID="lbl" runat="server" Text=' <%#DataBinder.Eval(Container.DataItem, "batchid")%>'></asp:Label>
                        <%#DataBinder.Eval(Container.DataItem, "batchid")%><br />
                        <%#DataBinder.Eval(Container.DataItem, "ts")%><br />
                        <asp:DropDownList ID="drp_comp" 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:DropDownList>
                    </ItemTemplate>
              </asp:Repeater>

so please help me.. Thanks in advance.

Check this out http://stackoverflow.com/questions/878852/jquery-add-decimal-to-select-no-duplicates-with-option-to-remove — birkof, Sep 08 '11 at 10:38
Sir that is some other case.. i want when any value selected in dropdown then it will check whether it is duplicate or not if so then display alert box that this(selected value) already selected please choose another. — Ram Singh, Sep 08 '11 at 10:48
Could you paste the final HTML it spits out, since its in javascript you want it :) — Marco Johannesen, Sep 08 '11 at 10:55

score 0 · Accepted Answer · answered Nov 20 '12 at 13:03

i have tried the following code and its working for me

function EmailPriortyCheker() {

    var Email = $('[id$=drpEmailPriorty]').val();
    var Pager = $('[id$=drpPagerPriorty]').val();
    var CellPhone = $('[id$=drpCellPhonePriorty]').val();

    if (Email == "") { } else {
        if (Email == Pager || Email == CellPhone) {
            alert('Priorty cannot be same.');
            $('[id$=drpEmailPriorty]').val("");
        }
    }
}
function PagerPriortyCheker() {
    var Email = $('[id$=drpEmailPriorty]').val();
    var Pager = $('[id$=drpPagerPriorty]').val();
    var CellPhone = $('[id$=drpCellPhonePriorty]').val();

    if (Pager == "") { } else {
        if (Pager == Email || Pager == CellPhone) {
            alert('Priorty cannot be same.');
            $('[id$=drpPagerPriorty]').val("");
        }
    }
}

function CellPhonePriortyCheker() {
    var Email = $('[id$=drpEmailPriorty]').val();
    var Pager = $('[id$=drpPagerPriorty]').val();
    var CellPhone = $('[id$=drpCellPhonePriorty]').val();

    if (CellPhone == "") { } else {
        if (CellPhone == Email || CellPhone == Pager) {
            alert('Priorty cannot be same.');
            $('[id$=drpCellPhonePriorty]').val("");
        }
    }
}

my html code is:

  <asp:DropDownList ID="drpEmailPriorty" onchange="EmailPriortyCheker();" TabIndex="5"
                    runat="server">
                    <asp:ListItem Text="Select Order" Value=""></asp:ListItem>
                    <asp:ListItem Text="First" Value="1"></asp:ListItem>
                    <asp:ListItem Text="Second" Value="2"></asp:ListItem>
                    <asp:ListItem Text="Third" Value="3"></asp:ListItem>
                </asp:DropDownList>

  <asp:DropDownList ID="drpPagerPriorty" onchange="PagerPriortyCheker();" TabIndex="8"
                    runat="server">
                    <asp:ListItem Text="Select Order" Value=""></asp:ListItem>
                    <asp:ListItem Text="First" Value="1"></asp:ListItem>
                    <asp:ListItem Text="Second" Value="2"></asp:ListItem>
                    <asp:ListItem Text="Third" Value="3"></asp:ListItem>
                </asp:DropDownList>

<asp:DropDownList ID="drpCellPhonePriorty" onchange="CellPhonePriortyCheker();" TabIndex="11"
                    runat="server">
                    <asp:ListItem Text="Select Order" Value=""></asp:ListItem>
                    <asp:ListItem Text="First" Value="1"></asp:ListItem>
                    <asp:ListItem Text="Second" Value="2"></asp:ListItem>
                    <asp:ListItem Text="Third" Value="3"></asp:ListItem>
                </asp:DropDownList>

Didier Ghys · Answer 2 · 2011-11-10T14:59:04.500

Here's a piece of jquery code to do this:

var $mySelects = $('select[name$=drp_comp]');
var previousValue;

$mySelects
.focus(function(event) {
    // to save the previous value
    previousValue = $(this).val();
}
.change(function(event) {
    var newValue = $(this).val();
    $mySelects.not($this).each(function() {
        var $this = $(this);
        if ($(this).val() === newValue) {
            alert('The value "' + newValue + '" has already been selected. Choose another one.');
            $this.val(previousValue);
            return false; // stop looping
        }
    });
});

In terms of usability, i would suggest you to disable in the other selects the values that are already selected.

You can do this in code-behind by setting the ListItem.Enabled = false if you postback on each change.

If you want to do this on client-side, this would give the idea:

var $mySelects = $('select[name$=drp_comp]');

$mySelects.change(function(event) {
    var $this = $(this), val = $this.val();
    $mySelects.not($this).find('option[value='+val+']').prop('disabled',true);
});

d.

detect duplicate value selected in dropdownlist using javascript or jquery?

2 Answers2