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 upon what type of business you work for.

<select id="business-type">
  <option value="1">Sole Trader</option>
  <option value="2">Partnership</option>
  <option value="3">Public Sector</option>
  <option value="4">Public Limited Company (Plc)</option>
  <option value="5">Charity</option>
</select>

// This should appear if you are a Sole Trader (option 1 in the select box)
<div id="soletrader">
<label for="tax">VAT Number</label>
<input type="text" name="tax" id="tax" /> 
</div>

// This should appear if you are a Public Sector business (option 3 in the select box)
<div id="publicsector">
<label for="urn">URN Number</label>
<input type="text" name="urn" id="urn" />   
</div>

// This should appear if you are a Charity (option 5 in the select box)
<div id="charity">
<label for="charityref">Charity Reference No.</label>
<input type="text" name="charity" id="charityref" />    
</div>

Would a case statement - written in jquery - be the most appropriate approach to this matter? How would I write such a statement?

The three input fields need to be hidden by default. Any assistance would be greatly appreciated. I am dismal at javascript/jquery.

Answer 1

First, you should add "class='field'" to each field div.

Then, with this code, you will show/hide the appropriate field upon selction in the dropdown:

$('#business-type').change(function(){
    var selection = $('#business-type').val();
    $('.field').hide();
    switch(selection){
        case 0:
            $('#soletrader').show();
            break;
        case 1:
            $('#publicsector').show();
            break;
        case 2:
            $('#charity').show();
            break;
    }
});

Answer 2

Few things:

1) I would add a class (I used .additional-field below) to each of the additional fields. This will allow you to hide them all in one swoop instead of requiring you to $.hide() each one explicitly. It's not so bad with just three, but if you ended up with much more, it'd get hairy quick.

2) I put the code in a function and both call that function on page load and use it as the parameter to .change(). This saves repeating the same code, and covers the case of an initial value from either editing an existing one or an error in the form that needs to be corrected. Otherwise, the additional field wouldn't show until you chose something else and then chose the item again.

$(document).ready(function(){

    function toggleBusinessTypeAdditionalFields() {
        $('.additional-field').hide();

        var selected = $('#business-type').val();
        switch (selected) {
            case 1:
                $('#soletrader').show();
                break;
            case 3:
                $('#publicsector').show();
                break;
            case 5:
                $('#charity').show();
                break;
        }
    }
    toggleBusinessTypeAdditionalFields();
    $('#business-type').change(toggleBusinessTypeAdditionalFields);

});