I have two tables Table1 and Table2. Each table contains <select> tag and the options and their values were same.

Now I want to check for each table, there any option exists more than one times. If yes then alert option already selected.

My code is:

$('#table1 tr').each(function() {
    $(this).find('select').change(function() { //alert($(this).val())
        if ($('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 ($('option[value=' + $(this).val() + ']:selected').length > 1) {
            alert('option is already selected');
            $(this).val($(this).find("option:first").val());
        }
    });
});

When select same in first table and second table it will alert option already selected. What's wrong with my code?

You can test the code here.

I have two tables Table1 and Table2. Each table contains <select> tag and the options and their values were same.

Now I want to check for each table, there any option exists more than one times. If yes then alert option already selected.

My code is:

$('#table1 tr').each(function() {
    $(this).find('select').change(function() { //alert($(this).val())
        if ($('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 ($('option[value=' + $(this).val() + ']:selected').length > 1) {
            alert('option is already selected');
            $(this).val($(this).find("option:first").val());
        }
    });
});

When select same in first table and second table it will alert option already selected. What's wrong with my code?

You can test the code here.

• javascript
• jquery
• html

• Both of them.(Each table and each row) – Rose Commented Jun 1, 2015 at 10:33

5 Answers 5

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

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

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

$('#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());
        }
    });
});

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