尝试这个 ：

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

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

我假设你正在寻找这样的东西。

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

尝试这个：

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