Question

I have a table . Inside each cells there are so many dropdownlists. The number of columns may vary. And the dropdownlist contents are same for each row. What i want is when I select a value from one dropdownlist ,that value must be removed from all other dropdownlist of the same row.

Here is my table

<table>
    <tbody> 
        <tr class="row">
            <td>
                <select>
                    <option value="1">Option 1 of row 1</option>
                    <option value="2">Option 2 of row 1</option>
                    <option value="3">Option 3 of row 1</option>
                </select>               
            </td>

            <td>
                <select>
                    <option value="1">Option 1 of row 1</option>
                    <option value="2">Option 2 of row 1</option>
                    <option value="3">Option 3 of row 1</option>
                </select>               
            </td>

            .....
            .....
        <tr>
        <tr class="row">
            <td>
                <select>
                    <option value="a">Option a of row 2</option>
                    <option value="b">Option b of row 2</option>
                    <option value="c">Option c of row 2</option>
                </select>               
            </td>

            <td>
                <select>
                    <option value="a">Option a of row 2</option>
                    <option value="b">Option b of row 2</option>
                    <option value="c">Option c of row 2</option>
                </select>               
            </td>

            .....
            .....
        <tr>
    </tbody>   
</table>

So when I select the “Option 1 of row 1” that option from all other dropdown list must be removed. How can i achieve this using jquery?

EDIT:

And if the user select another value from already selected dropdown for the second time, the previous replaced option should be restored

EDIT 2:

I figured out how to do that for a row by using jquery id selector. How can i Iterate through all of the rows ie using class selector?Below is the single row code

$('#row_id td select').change(function(){

    var values = [];
    $('#row_id td select').each(function(){
        if(this.value.length > 0)
            values.push(this.value);
    });

    $('#row_id td select option').each(function(){   
        if($.inArray(this.value, values) > -1 && !this.selected)                
            $(this).attr("disabled","disabled");
        else
            $(this).removeAttr("disabled");
    });

});
 $('#row_id td select').change();//triggers initial change

Answer 1

Got answer. Here you go

$('.row select').change(function(){

    var values = [];
    $(this).closest('tr').find('select').each(function(){
        if(this.value.length > 0)
            values.push(this.value);
    });

    $(this).closest('tr').find('select').find('option').each(function(){   
        if($.inArray(this.value, values) > -1 && !this.selected)                
            $(this).attr("disabled","disabled");
        else
            $(this).removeAttr("disabled");
    });

});
 $('.row select').change();