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

html, jquery

Solution

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

Problem

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

Original source