How would I show elements based on what is selected in a drop down using jQuery?

Question

Here is my run-of-the-mill drop down:

<select name="">
  <option value="">--Select One--</option>
  <option value="textarea">Text Area</option>
  <option value="textbox">Text Box</option>
  <option value="checkbox">Check Box</option>
  <option value="dropdown">Drop Down</option>
</select>

What I want to do is show show/hide other elements on the page based on if certain options are selected from the drop down.

So if "Text Area" was selected, then a div with the ID "textarea_fields" would show. If something else was then selected, that would hide and the other element would show for that select option.

I'm using jQuery, so using what that library offers is certainly an option.

Answer 1

Assuming each div has the class ".panel"

$("select").change(function(){
  $(".panel").hide().filter("#"+ $(this).val() +"_fields").show();
});

You could expand upon this basis to see if the new selection matches that is currently visible if you like. You can determine which is presently opened like this:

var currPanel = $(".panel:visible").attr("id");