Question

There is something obvious I’m missing about this.. just trying to display hidden divs based on the value of dropdown menu… here’s a jsfiddle:

jsFiddle example

and the code..

<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

Remove the quotations from your option values:

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

Updated Example: http://jsfiddle.net/andrewwhitaker/nKL5v/

The reason being that this line:

$(targetdiv)

Is equivalent to something like $("\"#divone\""), which contains an invalid selector.