Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2003-11-12
1
Medium Priority
?
209 Views
Last Modified: 2010-04-09
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
0
Comment
Question by:the_real_axelf
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 15

Accepted Solution

by:
OMC2000 earned 1000 total points
ID: 9730822
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question