如何從下拉列表中選擇特定的選項值以顯示隱藏的div？

Question

我有一個下拉列表，有4個選項，所以我想要的是當我點擊值「從」它顯示一個隱藏的div（用CSS來隱藏這個div「display：none;」）。任何人都可以幫助我呢？謝謝！

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應該是一個字符串文字。另外你需要隱藏，如果別的選擇，以便更好，如果你可以使用.toggle()

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

演示：從Fiddle