Question

I want to display a series of textboxes for additional input depending on the the user’s selection from a drop down list. When option1 is selected, one textbox appears for additional input. Option2 requires 3 textboxes, option3 needs 2 textboxes, option4 and other require one textbox each.

I have pieced together some code from researching other threads and have come up with the code found here: http://jsfiddle.net/zFQf3/

Can anyone please provide direction?

Thank you.

Answer 1

I redid what you had on jsFiddle (http://jsfiddle.net/zFQf3/29/ or http://jsfiddle.net/zFQf3/47/ if you want a class based solution), but I am not sure how to use that site, so I don’t know if it saved. I will copy and paste it here too just in case.

I modified your HTML to this:

<form>
    <select id="sel">
        <option value="">- select -</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="other">Other</option>
    </select>
    <label id="label1" for="option1">Text box label 1
        <input type="text" id="option1" />
    </label>
    <label id="label2" for="option2">Text box label 2
        <input type="text" id="option2" />
    </label>
    <label id="label3" for="option3">Text box label 3
        <input type="text" id="option3" />
    </label>
    <label id="label4" for="option4">Text box label 4
        <input type="text" id="option4" />
    </label>
    <label id="label5" for="option5">Other
        <input type="text" id="option5" />
    </label>
</form>

I added some CSS just for visibility sake:

label {
    display:block;
}

I modified your JS to this:

$(function() {
    //This hides all initial textboxes
    $('label').hide();
    $('#sel').change(function() {
        //This saves some time by caching the jquery value
        var val = $(this).val();
        //this hides any boxes that the previous selection might have left open
        $('label').hide();
        //This just opens the ones we want based off the selection
        switch (val){
            case 'option1':
            case 'option4':
            case 'other':
                $('#label1').show();
                break;
            case 'option2':
                $('#label1').show();
                $('#label2').show();
                $('#label3').show();
                break;
            case 'option3':
                $('#label1').show();
                $('#label2').show();
                break;        
        }
    });
    //I'm not really sure why these are here
    $("input")
        .focus(function () {
            $(this).next("span").fadeIn(1000);
        })
        .blur(function () {
             $(this).next("span").fadeOut(1000);
        });
});

I think that does what you want.