Show/Hide Div using jQuery with select box

Question

I am new to jQuery and I am trying to make a form that will show and hide options depending on what the user selects from a drop down select box. I have searched on here but have not found a solution that works for me yet. I found a tutorial that essentially did what I wanted, however it only seems to apply to select boxes. Any help is appreciated.

This is the HTML code I am working with.

$(document).ready(function(){
    $("#emeorg").change(function(){
    switch($(this).val()){
        case "add":
            $("#test1").slideDown("slow");
            $("#changebox select:not(#emeorg, #test1)").slideUp("slow");
        break;
        case "edit":
            $("#test2").slideDown("slow");
            $("#changebox select:not(#emeorg, #edithidden)").slideUp("slow");
        break;
        case "remove":
            $("#test3").slideDown("slow");
            $("#changebox select:not(#emeorg, #removehidden)").slideUp("slow");
        break;
    }
});
});

This is the HTML code I am using.

<div id="changebox">
<fieldset>
<legend><strong>Emergency Organization Information</strong></legend>
<div id="prompt">Select Action:</div><div id="answer"><select id="emeorg" name="emeorg">
        <option value="add">Add New Org</option>
        <option value="edit">Edit Existing Org</option>
        <option value="remove">Remove Existing Org</option>
        </select></div>
<div id="edithidden" style="display:none;">
<div id="prompt">Section to Edit:</div>
<div id="answer">
<select id="test2">
    <option>Section to Edit</option>
</select>
</div>
</div>
<div id="removehidden">
<div id="prompt">Section to Remove</div>
<div id="answer">
<select id="test3">
    <option>Section to Remove</option>
</select>
</div>
</div>
<div id="prompt">Organization Name:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="prompt">Organization Phone Number:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="prompt">Orginization Location:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="test3"><div id="prompt">Orginization Location Remove:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div></div>
<div id="prompt"><input type="submit" id="maininfoupdate" value="Update Information" /></div>
</fieldset>
</div>

I just cant figure out why the divs will not show. to test the only one I have inline styled is the edithidden to be display:none;. There is no effect on that one, the removehidden however shows just the select box for a second then it slides back up.

Any ideas?

Thanks in advance.

EDIT

Revised jQuery Code:

$(document).ready(function(){
$("#emeorg").change(function(){
    switch($(this).val()){
        case "add":
            $("#changebox select:not(#emeorg, #test1)").slideUp("slow");
        break;
        case "edit":
            $("#edithidden").slideDown("slow");
            $("#changebox select:not(#emeorg, #edithidden)").slideUp("slow");
        break;
        case "remove":
            $("#removehidden").slideDown("slow");
            $("#changebox select:not(#emeorg, #removehidden)").slideUp("slow");
        break;
    }
});
});

Revised HTML code:

<div id="changebox">
<fieldset>
<legend><strong>Emergency Organization Information</strong></legend>
<div id="prompt">Select Action:</div><div id="answer"><select id="emeorg" name="emeorg">
        <option value="add">Add New Org</option>
        <option value="edit">Edit Existing Org</option>
        <option value="remove">Remove Existing Org</option>
        </select></div>
<div id="edithidden" style="display:none;">
<div id="prompt">Section to Edit:</div>
<div id="answer">
<select id="editcontent">
    <option>Section to Edit</option>
</select>
</div>
</div>
<div id="removehidden" style="display:none;">
<div id="prompt">Section to Remove</div>
<div id="answer">
<select id="removecontent">
    <option>Section to Remove</option>
</select>
</div>
</div>
<div id="prompt">Organization Name:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="prompt">Organization Phone Number:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="prompt">Orginization Location:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="prompt"><input type="submit" id="maininfoupdate" value="Update Information" /></div>
</fieldset>
</div>

Now when I select edit the section for edithidden slides down, but no select box appears. When I change it back to Add it does not hide the garbage that edit slid down. I guess some progress is being made at least. Thanks again for all your help thus far.

Answer 1

The .slideDown() method animates the height of the matched elements. This causes lower parts of the page to slide down, making way for the revealed items.

I don't see anything to tell us how you're hiding the elements in the first place. simply using .show() and .hide() should work.