これを試して ：

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

どうぞ

$('#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();
});

フィドルをチェック

これを使用できます：

$('#category').on('change', function () {
    $('div.food').hide();
    var val = $('#category option:selected').text();
    console.log(val);
    $('#div' + val).show();
});

デモはこちら

HTML

<div id="divPie" class="food">
    <p>this is pie</p>
</div>
<div id="divCake" class="food">
    <p>this is cake</p>
</div>
<div id="divCandy" class="food">
    <p>this is candy</p>
</div>

ページの読み込みから隠れるように、div / html に CSS を追加しました。

div.food
{
  display:none;
}

またはjQuery経由$('div.food').hide();

これを試して：

HTML:

<select id="category" onchange='display();'>
    <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" style="display:none;">
    <p>this is pie</p>
</div>
<div id="divCake" class="food" style="display:none;">
    <p>this is cake</p>
</div>
<div id="divCandy" class="food" style="display:none;">
    <p>this is candy</p>
</div>

jQuery:

function display(){
 var select=$('#category').val();
 if(select!=''){
  var divblock='div'+select;
  $(".food").hide();
  $('#'+divblock).css('display','block');
 }
}

$('#'+divblock).show();代わりに 使用することもできます$('#'+divblock).css('display','block');

このようなものを探していると思います。

<select id='category'>
  <option value='test1'>Test 1</option>
  <option value='test2'>Test 2</option>
</select>

<div id='test1'>
  Content Here
</div>

<div id='test2'>
  Content Here
</div>

あなたはおそらくこのようなことをすることができます。

//Hide All Divs
$('div').hide();

//Get the Currently Selected Item
var selected = $('#category').val();
//Show the selected one.
$('#'+selected).show();

<select id="category">
<option value="" disabled="disabled" selected="selected" onchange="hideshow(this)">Please select a category</option>
<option name="choice1" value="divPie">   Pie  </option>
<option name="choice2" value="divCake">  Cake </option>
<option name="choice2" value="divCake"> Candy </option>

</select>

ユーザーがその時点で要素を選択するとdivが表示されるため、すべてのdivが非表示になります

<div id="divPie" class="food" style="display:none">
<p> this is pie </p>
</div>

<div id="divCake" class="food" style="display:none">
<p> this is pie </p>
</div>

<div id="divCandy" class="food" style="display:none">
<p> this is pie </p>
</div>

これは、ユーザーが div から値を選択したときに div を表示する JavaScript コードです。

<script>
function hideshow(divval)
{
    $("#"+divval).show();
}
</script>

何か問題があれば教えてください。これはテスト済みのスクリプトではありませんが、うまくいくと思います

HTML

<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 cake </p>
</div>
<div id="divcandy" class="food">
<p> this is candy </p>
</div>

JS

$(function(){
  $(".food").hide();
    $("#category").change(function(){
        $(".food").hide();
        $("#div" + $(this).val()).show();
    });
 });

実際に見てみましょう:

JSFiddle

選択ボックスに変更ハンドラーを配置し、選択しfoodたものを除くすべてを非表示にします。

$('#category').change(function(){
  switch ($(this).val())
  {
    var div;
    case 'pie':
      div = 'divPie';
      break;
    case 'cake':
      div = 'divCake';
      break;
    case 'candy':
      div = 'divCandy';
      break;
    $('.food').hide();
    $(div).show();
  }
});