displaying further information when selecting a value in Drop-down box

Hi !

I'm using a drop-down box in a HTML-form:
Code :
<select style='font-size:10px' name='projects' class='general' >
   <option type='text' value='PJ01' selected>PJ01</option>
   <option type='text' value='PJ02'>PJ02</option>

The user can choose between "PJ01" and "PJ02". In order to give the user more information about the selected Projects, i want to display further information to the user somehow (e.g. next to the mouse-arrow..). If the user selects "PJ01" in the drop-down list then he should read the "help"-text : "Project 1 ...". If he selects "PJ02" he should read "Project 2...." . I know how to enable a helptext in textfields with the on mouseover-event but not with drop-down lists. So how can i achive this goal in a dropdown-list??
Thanks for any help  :-)

Best regards

Who is Participating?
OMC2000Connect With a Mentor Commented:
There is no way to display extended info for drop-down list items using standard tags.
You should make DIV with style like the following:
<div id="tips" style="display:none;position:absolute;width:200;height:100;">

then onchange event you should set desired text(innerHTML) to this div, set display block and define div's position like that:
divEl = document.getElementById("tips");
selEl = document.getElementById("mySel");
divEl.innerHTML = "extra info";
divEl.style.display = "block";
divEl.top = getAbsoluteOffsetTop(selEl) + 20;
divEl.left = getAbsoluteOffsetLeft(selEl) + 200;

and use functions like these:

    function getAbsoluteOffsetTop(obj) {
         var top = obj.offsetTop;
         var parent = obj.offsetParent;
         while (parent != document.body) {
              top += parent.offsetTop;
              parent = parent.offsetParent;
         return top;
     function getAbsoluteOffsetLeft(obj) {
         var left = obj.offsetLeft;
         var parent = obj.offsetParent;
         while (parent != document.body) {
              left += parent.offsetLeft;
              parent = parent.offsetParent;
         return left;

also you could add processing of on MouseOver and OnMouseOut to your selection in order to hide/show this tooltips.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.