使用javascript或jquery检测下拉列表中选择的重复值？答案

【问题标题】：detect duplicate value selected in dropdownlist using javascript or jquery?使用javascript或jquery检测下拉列表中选择的重复值？
【发布时间】：2011-11-12 21:10:06
【问题描述】：

我在转发器中有一个下拉列表。这个下拉列表出现在转发器中的每条记录显示中。我希望仅在客户端上不应该从下拉列表中选择重复值 >.我的代码是

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

所以请帮助我..提前谢谢。

【问题讨论】：

看看这个stackoverflow.com/questions/878852/…
先生，这是另一种情况。我希望在下拉列表中选择任何值时，它会检查它是否重复，如果是，则显示警报框，表明此（所选值）已选择请选择另一个。
你能粘贴它吐出的最终 HTML，因为它是你想要的 javascript :)

标签： javascript jquery asp.net drop-down-menu

【解决方案1】：

这是一段执行此操作的 jquery 代码：

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
        }
    });
});

在可用性方面，我建议您在其他选择中禁用已选择的值。

如果您在每次更改时回发，您可以通过设置 ListItem.Enabled = false 在代码隐藏中执行此操作。

如果您想在客户端执行此操作，这将给出这个想法：

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);
});

【讨论】：

【解决方案2】：

我已经尝试了以下代码，它对我有用

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("");
        }
    }
}

我的html代码是：

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

【讨论】：