How to show a description when a select box item has been selected On my &quot;node/add&quot; form I have a &quot;topic&quot; taxonomy term field a user has to select. I would like to be able to display a description about a selected text next to the box, see red box in screenshot:

I'm sure there are CSS/javascript hacks out there, just wondering if there is a &quot;Drupal way&quot; for doing this?
Cheers
This isn't strictly theming, but the following works for me:

Put the following in a custom module:

function tax_desc_menu() {
  $items = array();

  $items['termdescription/%'] = array(
    'title' =&gt; 'Term description callback',
    'page callback' =&gt; 'tax_desc_get_description',
    'page arguments' =&gt; array(1),
    'access arguments' =&gt; array('access content'),
    'type' =&gt; MENU_CALLBACK,
  );

  return $items;
}

function tax_desc_get_description($tid) {

  if (!is_numeric($tid)) {
    return drupal_json_output('Select a term');
  }

  $term = taxonomy_term_load($tid);

  $description = $term-&gt;description;

  return drupal_json_output($description);

}


This is simply a menu hook that calls a function.  You will be calling this menu link to get the description data for the taxonomy term.  The second function takes the term ID that will be passed in the ajax call, and gets the term object.  From that, it pulls the description set using the standard taxonomy term description.

Next, you'll need to add the following javascript and reference it in your module .info file:

(function($){
  Drupal.behaviors.taxdescGetDesc = {
    attach: function (context) {

      $(".page-node-add-article #edit-field-tags-und").after('&lt;div id="mycontainer"&gt;Select a term&lt;/div&gt;');

      $(".page-node-add-article #edit-field-tags #edit-field-tags-und").click(function(){
        $.ajax({
          cache: false,
          type: 'POST',
          url: "/termdescription/" + $(this).val(),
          context: document.body,
          dataType: "json",
          success: function (json){
            $('#mycontainer').html(json)
          }
        })
      })
    }
  }
})(jQuery);


You'll probably want to change the ID's and classes that I've used, as I've just used a standard article type for this.

This Javascript will put a div with the ID of mycontainer below the select box (this can be styled/positioned with CSS so it matches your image).  

when you click the select box, the term description will populate the div created earlier called mycontainer.

Just in case, your .info file will look like the following:

name = taxonomy description
description = taxonomy description from list

core = 7.x

scripts[] = tax_desc.js