ASP.NET DropDownList extended using Javascript

Here's some sweet javascript to replace the items of a drop down list with a larger panel that can display more information and be formatted as desired.  In my case the text in the drop down was too long and I wanted to wrap it over several lines, so I created a popup layer positioned over the drop down list with links for the drop down items to set the selected value.

Place a div around your drop down list like this (it's was in a gridview, hince the IDfield to give the div a unique id):

<div id='<%# Eval("IDfield") %>' onclick='ShowComments("<%# Eval("IDfield") %>")'>
</div>

Add a panel to show your items, like this:

<asp:Panel ID="CommentPanel" runat="server" style="display:none; position:absolute; width:500px; top:300px; left:300px;">
<input type="hidden" id="dropID" />
<a href="#" onclick="CloseComments(); return false;" style="float:right; position:relative; left:-16px;background-color:White; margin-top:1px; padding-left:2px; padding-right:2px;" title="Close">X</a>
...List item links here with OnClientClick='HideComments(this)'...
</asp:Panel>

Then add this Javascript: 

<scripttype="text/javascript">
function ShowComments(param) {
var div = document.getElementById(param);
var panel = document.getElementById('<%= CommentPanel.ClientID %>');
panel.style.top = getY(div)-20 + "px";
panel.style.left = getX(div)-40 + "px";
panel.style.display = "";
var hidden = document.getElementById("dropID");
var drop = div.getElementsByTagName("select")[0];
if (drop) {
hidden.value = drop.id;
drop.blur();
} else {
hidden.value = "";
}
}

function HideComments(link) {
var panel = document.getElementById('<%= CommentPanel.ClientID %>');
panel.style.display = "none";
var hidden = document.getElementById("dropID");
if (hidden.value) {
var drop = document.getElementById(hidden.value);
for (i=0; i<drop.length; i++) {
if (drop.options[i].text == link.innerHTML) {
drop.selectedIndex = i; }
}
}
}

function CloseComments() {
var panel = document.getElementById('<%= CommentPanel.ClientID %>');
panel.style.display = "none";
}

function getY( oElement )
{
var iReturnValue = 0;
while( oElement != null ) {
iReturnValue = iReturnValue + oElement.offsetTop;
oElement = oElement.offsetParent;
}
return iReturnValue;
}

function getX( oElement )
{
var iReturnValue = 0;
while( oElement != null ) {
iReturnValue = iReturnValue + oElement.offsetLeft;
oElement = oElement.offsetParent;
}
return iReturnValue;
}
</script>