Create a conditional statement for <select> HTML markup in JQuery

Question

how do i choose a value in a <select> HTML markup to be processed by a JQUERY, when clicked or chosen the specified div will show, the rest of the divs will be hidden.

I've shown only 3, but there are 10 more choices.

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

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

goes something like this..

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

Answer 1

Try this :

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


)});

p.s. I don't know if all those FOOD divs are hidden by default , but if they not so add this :

(by css)

div.food
{
  display:none;
}

(or by Js)

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

Answer 2

There you go

$('#category').change(function () {
    // Get the value of the dropdown
    var value = this.value;

    // Convert the first char to uppercase
    value = value.substr(0,1).toUpperCase() + value.substr(1, value.length);
    // Hide all food divs
    $('.food').hide();
    $('#div'+ value).show();
});

Check Fiddle