如何从下拉列表中选择特定选项值以显示隐藏的div？

Question

我有一个下拉列表，有4个选项，所以我想要的是当我点击＆＃34;来自＆＃34;它显示了一个隐藏的div（使用CSS来隐藏这个div＆＃34; display：none;＆＃34;）。有人可以帮我吗？谢谢！

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