Select options: jQuery, Case and show/hide form fields

Question

What is the most efficient way of showing/hiding form fields based on the value of a select control? I have one select control and three input fields, which show/hide based

Answer 1

I don't think an if/switch statement is necessary. Help your JavaScript out a bit with a little more HTML markup. If you put an attribute named "data-val" on each of the divs, and assign it the value of the option you want it to appear along with, then the JS becomes very simple.

So your HTML would look something like this for the divs:

    VAT Number
     

And then your JS would be:

 $('select').change(function(){
     var val = $(this).val();
     $('div').hide().filter('[data-val=' + val + ']').show();
 });