Just something I whipped up during lunch hour. For now IE only (tested in IE6.0), but with added browser recognition and substituting attachEvent with addEventListener it can be made DOM compliant and would work with Mozilla and other Gecko based browsers.
The beauty of the shown approach is that it replaces the existing select controls with size attribute set to 2+ (those that are represented as a list box) with the div element. Just need to put upgradeSelect() function to the body onload. If visitor has JS disabled or uses old or non-compliant browser the default select box will be displayed.
To make the form operational some additional code is required. A hidden input element needs to be created with the same name as the select box. It's value would be set when processing option onclick event with the value of that option. This would make the change transparent to the script processing the form.
As you can see from the code all the styles for the box, option and selected option are completely customizable. The default tooltip pops up after you hover over an option for a few seconds, but custom tooltips can be used to show immideately and only for those items that are too long for the box.
You can also change the overflow property to have both scrollbars as you originally requested.
Functionality to recognize the OPTGROUP tag can also be added to make the emulation complete.
If the code below is over your head to work with, I can finish the coding for you (at a discount rate ;) )
<html>
<head>
<title>ListBox Upgrade</title>
<script>
function upgradeSelect()
{ scs=document.getElementsByTagName('select');
for(i=0; i<scs.length; i++)
if(parseInt(scs[i].size)>1)
new KLSelect(scs[i]);
}
function KLSelect(sc)
{ kls=document.createElement('div');
kls.className = sc.className;
for(i=0; i<sc.options.length; i++)
{ with(kls.appendChild(document.createElement('p')))
{ appendChild(document.createTextNode(sc.options[i].firstChild.nodeValue));
if(sc.options[i].selected) className = 'KLOptionSelected';
else className = 'KLOption';
optionValue = sc.options[i].value;
title = firstChild.nodeValue;
attachEvent('onclick',KLOptionClicked);
}
}
sc.parentNode.replaceChild(kls,sc);
}
function KLOptionClicked(e)
{ with(e.srcElement.parentNode)
for(i=0; i<childNodes.length; i++)
childNodes[i].className = 'KLOption';
e.srcElement.className = 'KLOptionSelected';
}
</script>
<style>
.KLSelect
{ width: 125px;
height: 50px;
background: #eeeeee;
border: groove #808080 3px;
font-family: Tahoma, sans-serif;
font-size: 11px;
overflow: auto;
overflow-x: hidden;
}
.KLOption, .KLOptionSelected
{ margin: 0px;
padding: 0px 5px 0px 3px;
width: 100%;
white-space: nowrap;
cursor: pointer;
cursor: hand;
}
.KLOptionSelected
{ background: #303030;
color: #ffffff;
}
</style>
</head>
<body>
<p>Example of emulating select control with division element</p>
<select size="4" name="test" class="KLSelect">
<option value="1" selected>option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5 which is pretty darn long </option>
<option value="6">option 6</option>
</select>
<p>
<button onclick="upgradeSelect()"> Replace Select Control</button>
</p>
</body>
</html>