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

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

Axel
the_real_axelfAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

OMC2000Commented:
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;">
</div>

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

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.