jQuery 下拉菜单不会显示隐藏的 div

Question

有一些明显的东西我错过了......只是试图根据下拉菜单的值显示隐藏的div......这是一个jsfiddle:

jsFiddle example

和代码..

<p id="data"></p>  

<select id="dropdown">

      <option label="US CERT1">"#divone"</option>
      <option label="US CERT2">"#divtwo"</option>
      <option label="NIST">"#divfour"</option>
      <option label="DHS NY">"#divfive"</option>      
      <option label="DHS News">"#divsix"</option>   

  </select>

  <div id="divone" class="section" >  

     Contents of divone

  </div>


<script>
$(document).ready(function () {

   function displayVals() {
      var targetdiv = $("#dropdown").val();
      $("#data").html("<b>Var data:</b> " +  targetdiv  );
      $('.section').css('display','none');
      $(targetdiv).css('display','block');
   }

   $("select").change(displayVals);
   displayVals();

});
</script>

Answer 1

从您的选项值中删除引号:

  <option label="US CERT1">#divone</option>
  <option label="US CERT2">#divtwo</option>
  <option label="NIST">#divfour</option>
  <option label="DHS NY">#divfive</option>      
  <option label="DHS News">#divsix</option>   

更新示例: http://jsfiddle.net/andrewwhitaker/nKL5v/

原因是这一行:

$(targetdiv)

相当于 $("\"#divone\"") 之类的内容，其中包含无效的选择器。