How do I select a specific option value from a drop down list to show a hidden div?

Question

I have a drop down list that has 4 options, so what I want is when I click on the value "from" it shows a hidden div (used CSS to hide this div "display: none;"). anyone can help me with that? THANKS!

Html:

<select id="type">
<option value="">--select--</option>
<option value="category">Category</option>
<option value="brand_name">Brand</option>
<option value="campaign_name">Campaign</option>
<option value="from">Recap date</option>
</select>
</label>

<div id="showfrom">
<input type="text" class="filter" value="02-16-2012" id="from">
</div> 

Js:

$("#type").change(function() {
var selected = $(this).find(':selected').val();
if (selected == from) {
$("#showfrom").show();
}
});

Answer 1

from should be a string literal. Also you need to hide if something else is selected so better if you can use .toggle()

$("#type").change(function () {
    $("#showfrom").toggle(this.value == 'from');
}).change();//to set the initial state

Demo: Fiddle