1

I have several tables on a page with the possibility of multiple dropdowns in each table. The table and the dropdowns are autogenerated. The tables I want to target have numeric ids and all of the values of the dropdowns will be numeric.

HTML Sample Code for one of the tables I would like to target

<table id="15">
 <tr>
  <td>
   <div id="dd_4_0">
    <select id="4_0">
     <option value=""></option>
     <option value="18">VNDR64324</option>
     <option value="21">MFG5321</option>
     <option value="27">OTHER</option>
    </select>
   </div>
  </td>
 </tr>
 <tr>
  <td>
   <div id="dd_2_6">
    <select id="2_6">
     <option value=""></option>
     <option value="12">VN32R2345</option>
     <option value="21">5678</option>
     <option value="27">NEM</option>
    </select>
   </div>
  </td>
</tr>
</table>

Once one of the dropdowns in the table are selected I would like to hide the other dropdowns. I have code that works but has a lot of iterating through loops that I would like to do without if possible. Is there a cleaner way to write this?

$('table').click(function() {
    if($.isNumeric(this.id))
        dd = $("#" + this.id + " select");
        $.each(dd, function(){
            if($.isNumeric($(this).val()))
            {
                selectedId = this.id;
                $.each(dd, function(){
                    if(this.id != selectedId)
                        $('#dd_' + this.id).hide();
                });

            }
        });
});
jessier3
  • 809
  • 1
  • 7
  • 16
  • You don't have access to modify the code which generates the table? Adding a few classes could really make your life easier. – James Montagne May 10 '13 at 19:29
  • `2_6` is not numeric. – Barmar May 10 '13 at 19:32
  • Yes, it's all mine so I can edit anything there. However, that said my dropdowns are all chosen dropdowns which is a jquery plug in that adds its own classes and does some duplication that have made adding additional classes hard. – jessier3 May 10 '13 at 19:32
  • 1
    I'm not checking to see if the dropdown or div Id is numeric. – jessier3 May 10 '13 at 19:33
  • You could use `.filter()` instead of `$.each()`, but it's essentially the same. jQuery doesn't have any methods for matching IDs or values based on patterns or regular expressions. – Barmar May 10 '13 at 19:38

2 Answers2

0

I would add a common class to the relevant tables and then do this:

$(".table_class select").change(function(){
    var $this = $(this);

    if($this.val() != ""){
        $this.closest(".table_class").find("select").not($this).hide();
    } else {
        // if you want, re-show them if the select is de-selected
        $this.closest(".table_class").find("select").show();
    }
});
James Montagne
  • 77,516
  • 14
  • 110
  • 130
  • Both of these solutions make perfect sense and should work but I haven't gotten them to yet. Probably something else in my code causing problems. Thank you for the input though! – jessier3 May 14 '13 at 15:09
0

Once one of the dropdowns in the table are selected I would like to hide the other dropdowns.

i don't know if i got you but the shortest way(that i could think of..) will be calling the change() event of select

try this

$('select').change(function(){
   $(this).parents('tr').find('select').not($(this)).hide(); 
});

however this select all the select element present in the document...if you are sure there will be no other select elements outside the table or anywhere else in the page...then this should work...else you can add class to each table and call selector for that table select only...

working fiddle here

bipen
  • 36,319
  • 9
  • 49
  • 62
  • I made a mistake in my table example. All of the dropdowns are in their own tr tags as well as their own tds. Is there a way to modify the parents('tr') to refer to the table instead? – jessier3 May 10 '13 at 19:46
  • yes ...replace `tr` with `table`... but mind you this will select all the parents `table`..as long as you don't have any table wrapping this table..this should work.. example fiddle http://jsfiddle.net/bipen/TD4cH/1/ – bipen May 10 '13 at 19:49
  • Both of these solutions make perfect sense and should work but I haven't gotten them to yet. Probably something else in my code causing problems. Thank you for the input though! – jessier3 May 14 '13 at 15:01