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

Question

我有一個包含4個選項的下拉列表，所以我想要的是當我單擊值“ from”時它顯示一個隱藏的div（用於隱藏此div的CSS“ 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

演示： 小提琴