Ok not really dynamic content, but lets suppose that you want to implement a select box that populates (and displays) additional content, how can this be done?

JQuery

Well one solution could be to use a JQuery on change event (main disadvantage will only work with javascript), the principle is to store the additional data in the value key of each of the select options and use that to populate the dynamic content area.

A simple example, code snippet, is shown below:

I have included the code snippet below:

<!-- JQuery stuff -->
<script type="text/javascript">
$(function(){
   $('#country').on('change',function() {
       var country = $(this).val() + "";
       if (country != "") {
         var arr = country.split("|");
         $("#fld0").val(arr[0]); 
         $("#fld1").val(arr[1]);
         $("#fld2").val(arr[2]);
         $("#mydiv").show();
       } else {
         $("#mydiv").hide();         
       }
   })
})
</script>
...
<body>
  Select Country:
  <select id="country">
    <option value="">--Select--</option>
    <option value="USA|The Good Old|US of A">USA</option>
    <option value="UK|Good Old|Blighty">UK</option>
  </select>
   
  <!-- My non-semantic markup -->
  <div id="mydiv" style="display:none">
     Country Code: <input id="fld0" type="text" readonly="readonly" value="?"><br>
     Field 1: <input id="fld1" type="text" readonly="readonly" value="?"><br>
     Field 2: <input id="fld2" type="text" readonly="readonly" value="?">
  </div>
</body>

If you want to see this in action just click here, dont disable javascript as there is no fall back effect.

Downloads

The code (what there is of it) is available as a download.

Zip FIle