Jquery dependant dropdown inside table

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

Does the first select list on the row always contain all values ? — Manse, May 29 '12 at 16:15
@ManseUK initially all dropdownlist of same rowcontains same contents. I want the values in a single row to be unique — dInGd0nG, May 29 '12 at 16:47

lucuma · Answer 1 · 2012-05-29T18:41:54.817

Here you go:

$('select').change(function() {
     $(this).closest('tr').find('select').not(this).find('option[value="'+ $(this).val() + '"]').remove();
});

Working Example: http://jsfiddle.net/lucuma/7Mxzj/

It removes selected options from the other rows based on the value attribute. I'm not sure how functional this is considering it is possible to just keep selecting and removing all the options but it answers your question.

Updated Answer per Modified Question

Update per question being updated: Now the options are shown and hidden based on the selected items. http://jsfiddle.net/lucuma/7Mxzj/2/

$('select').change(function() {
     $(this).closest('tr').find('select').find("option").show();
     $(this).closest('tr').find('select').not(this).find('option[value="'+ $(this).val() + '"]').hide();
});

But if i changes selection this script doesnt restores the removed value — dInGd0nG, May 29 '12 at 16:40

score 1 · Accepted Answer · answered May 30 '12 at 09:48

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

score 0 · Answer 3 · edited May 23 '17 at 12:11

Most of what you want to do has been previously covered in this question: Removing an item from a select box

In your case, you want to remove options from select boxes within a single row in a table. In order to write a jQuery selector that matches these selects, you'll need to take the jQuery object representing your select box and call the parent() method on the result of calling the parent() method. The result of calling the parent() method on the select is a table cell and the result of calling the parent() method on the table cell is a table row.

There's more than one way to skin this cat, but the above should help get you started.

But how can i restore the removed item if the user changes the list for the second time? — dInGd0nG, May 29 '12 at 16:43

score 0 · Answer 4 · edited May 30 '12 at 07:53

There are a number of ways to achieve this, depending on how comfortable you are with dynamic webpage development. First you should give a different id for each of the drop down lists so that you're able to select them by doing $('#yourdropdownID') or document.getElementById(...).

On your <select> you will need to use onClick or onChange (depending on how you want it to 'look and feel') which will call a function that takes in the selected option. For example: <select onClick='removeOption(this);'>

You will need to code this function to do a number of things, let's say for argument's sake you have three lists already: 1. Loop through your three lists. 2. Within this loop, use a switch to compare the value received to the values in the options of your other two selects. 3. Compare these values to the one received from the function and remove this option from the select. 4. Refresh the current select drop down list so that JQuery displays the elements properly.

You may need to test it a few times to make sure it all runs smoothly, JQuery can be a bit quirky so make sure to debug as you do all this.

Jquery dependant dropdown inside table

4 Answers4