开发者

detect duplicate value selected in dropdownlist using javascript or jquery?

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")%&g开发者_运维知识库t;<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.


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.


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜