Avoid same option selected multiple times using jquery

Question

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.

Answer 1

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

Answer 2

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