CODEWITHSUNDEEP
javascriptjquerydrop-down-menu
dInGd0nG
dInGd0nG

Reputation: 4114

Jquery dependant dropdown inside table

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

Upvotes: 0

Views: 7197

Answers (4)

dInGd0nG
dInGd0nG

Reputation: 4114

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

Upvotes: 1

AGE
AGE

Reputation: 3792

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.

Upvotes: 0

lucuma
lucuma

Reputation: 18339

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

Upvotes: 3

Vivian River
Vivian River

Reputation: 32390

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.

Upvotes: 0

Related Questions