在JQuery中为HTML标记创建条件语句

如何在< SELEct>中选择一个值？由JQUERY处理的 HTML标记,当单击或选择指定的div将显示时,其余的div将被隐藏.

我只展示了3个,但还有10个选择.

<SELEct id="category">
<option value="" disabled="disabled" SELEcted="SELEcted">Please SELEct a category</option>
<option name="choice1" value="pie">   Pie  </option>
<option name="choice2" value="cake">  Cake </option>
<option name="choice2" value="cAndy"> CAndy </option>

</SELEct>

隐藏的分裂

<div id="divPie" class="food">
<p> this is pie </p>
</div>

<div id="divCake" class="food">
<p> this is pie </p>
</div>

<div id="divCAndy" class="food">
<p> this is pie </p>
</div>

这样的事情……

if $('#category').val("pie"); {
    //then show divpie
}
else {
     //hide the other divs
 }

$("#category").on('change',function (

  $("div.food").hide( );

  var _lower=$(this).val();
  var _value=_lower.charAt(0).toUpperCase() + _lower.slice(1); //just noticed that there is a uppercase char there...
  $("#div"+_value).show()


)});

div.food
{
  display:none;
}

$("div.food").hide();