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

Question

我如何在 <select> 中选择一个值？由 JQUERY 处理的 HTML 标记，当 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>

隐藏的div

<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()


)});

附注我不知道默认情况下是否所有这些 FOOD div 都是隐藏的，但如果不是，那么添加:

(通过 CSS)

div.food
{
  display:none;
}

(或通过 Js)

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