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>
精彩评论