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

Question

我如何在<select>HTML标记中选择要由JQUERY处理的值，当显示clicked或chosen指定的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>

隐藏的Divs

<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
 }

Answer 1

尝试这个 ：

$("#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()


)});

ps 我不知道默认情况下是否所有这些 FOOD div 都是隐藏的，但如果不是，请添加以下内容：

（通过CSS）

div.food
{
  display:none;
}

（或由Js）

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