jQuery: Conditional show an element based on drop down box selection

Question

I have two related drop-down lists, in which the contents in the second drop-down list depends on the selection made in the first one. For example, in the following HTML cod

Answer 1

Your questions describe the right ideas. You just have to structure your HTML to take advantage of them.

JSFiddle posted here: http://jsfiddle.net/iknowkungfoo/TKamw/

HTML - I added an ID and CLASS to each TR that match the values in your primary SELECT:

    

        

            

              
Application method:
              

                Pick first
                Aerial
                Ground
              
            
            

              
Aerial Size Dist:
              

                A1
                A2
              
            
            

              
Ground spray type:
              

                B1
                B2
              
            
        
    

CSS - hide those TRs by default:
tr.method_options { display: none; }​

JavaScript/jQuery - When the primary SELECT changes, hide all TRs with a CLASS of "method_options". Then, Find the TR whose ID matches the value of the selected option in the primary SELECT and show it. If there is no match, then nothing is shown.

$(document).ready(function(){

    $('#id_application_method').on('change', function() {         

        $('tr.method_options').hide();
        $('#tr_' + $(this).val() ).show();

    });

});