I have two tables Table1 and Table2.
Each table contains tag and the options and their values were same.
Now I want to check for each table,
The problem was that you were selecting all options (table1 + 2) whereas you should have selected options belonging to the current table, such as below.
$('#table1 tr').each(function() {
$(this).find('select').change(function(){//alert($(this).val())
if( $('#table1').find('select option[value='+$(this).val()+']:selected').length>1){
alert('option is already selected');
$(this).val($(this).find("option:first").val());
}
});
});
$('#table2 tr').each(function() {
$(this).find('select').change(function(){//alert($(this).val())
if($('#table2').find('select option[value='+$(this).val()+']:selected').length>1){
alert('option is already selected');
$(this).val($(this).find("option:first").val());
}
});
});
Demo@Fiddle
Edit:
A slightly better version:
// Have a class if you will, for your 2 tables (or more) which would avoid the use of ID's as you may not even need them
// <table class="grouped-select" ... >
// and then do:
// $('.grouped-select').find('select').on('change', function() {
// or just use tag selector
$('table').find('select').on('change', function() {
//Cache jQuery references that you'd reuse over and over
var $this = $(this);
if( $this.closest('table').find('select option[value=' + $this.val() + ']:selected').length > 1) {
alert('option is already selected');
$this.val($this.find("option:first").val());
}
});
$('#table1 tr').each(function() {
$(this).find('select').change(function() { //alert($(this).val())
if ($('#table1 tr td select option[value=' + $(this).val() + ']:selected').length > 1) {
alert('option is already selected');
$(this).val($(this).find("option:first").val());
}
});
});
$('#table2 tr').each(function() {
$(this).find('select').change(function() { //alert($(this).val())
if ($('#table2 tr td select option[value=' + $(this).val() + ']:selected').length > 1) {
alert('option is already selected');
$(this).val($(this).find("option:first").val());
}
});
});
If you change your if statements to be specific to each table that should do it. So:
if($('#table1 tr option[value='+$(this).val()+']:selected').length>1)
and if($('#table2 tr option[value='+$(this).val()+']:selected').length>1)
and actually if you changed the selector to parent selectors you could use just the one code block of any table of this kind:
$('table').each(function() {
$(this).find('select').change(function() {
if ($(this).parent().parent().parent().parent().find($('tr option[value=' + $(this).val() + ']:selected')).length > 1) {
alert('option is already selected');
$(this).val($(this).find("option:first").val()); //put it back to 1
}
});
});
In this one it loops through all tables and on the change event finds the table its part of (so the id doesn't matter) and then runs your check as you had it before.
And even better than that you could use the .closest selector
$('table').each(function() {
$(this).find('select').change(function() {
if ($(this).closest('table').find($('tr option[value=' + $(this).val() + ']:selected')).length > 1) {
alert('option is already selected');
$(this).val($(this).find("option:first").val()); //put it back to 1
}
});
});
You are selecting all the options
instead of in the current table.
Live Demo
Change
$('option[value=' + $(this).val() + ']:selected')
To
$(this).closest('table').find('option[value='+$(this).val()+']:selected')
You can make single handler instead of multiple for each row and further simplify and optimize code like this.
$('select').change(function () {
if ($(this).closest('table').find('option[value=' + $(this).val() + ']:selected').length > 1)
{
alert('option is already selected');
$(this).val($(this).find("option:first").val());
}
});
Try with attribute selector in jquery
$('[id ^= "table"] tr').find('select').change(function() {
if ($(this).closest('table').find('option[value=' + $(this).val() + ']:selected').length > 1) {
alert('option is already selected');
$(this).val($(this).find("option:first").val());
}
});
Fiddle