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

时间:2011-10-02 19:02:38

标签: jquery forms

有一些显而易见的我对此缺失...只是试图根据下拉菜单的值显示隐藏的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>

1 个答案:

答案 0 :(得分:2)

option值中删除引文:

  <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\""),其中包含无效的选择器。

相关问题