DHTML Psuedo Select
This script has been deprecated and should not be used. No update is forthcoming.
One of the more common irritants with the Windows version of Internet Explorer is the fact that its <select> elements do not honor the z-index style attribute. One example of this is the now common use of "fly-out" navigation menus - should you have a select element on the page, and your user is in WinIE, the select element will rudely show through the DIV element housing your navigation.

The DHTML Psuedo Select was developed to get around this annoying "feature" of the select element and still maintain the same look and functionality.

Important: This version works in MSIE and Gecko/Moz but you MUST declare an XHTML doctype. View the source of this document if you dont know what that is.

Select a Value
  

<style type="text/css">
#dhtml_select { 
	font-family:verdana;
	font-size:10px;
	width:146px;
	height:18px;
	border-style:inset;
	border-width:2px;
	position:relative;
}

.m_dhtml_select_options {
	position:relative;
	background-color:#FFFFFF;
	padding:2px;
	text-align:left;
	border-style:none;
}

.dhtml_href { width:100%;}
.dhtml_href:link { color:#000000;text-decoration:none;}
.dhtml_href:visited { text-decoration:none;color:#000000;}
.dhtml_href:hover { text-decoration:none; color:#FFFFFF; background-color:darkblue; }
.dhtml_href:active { text-decoration:none;}
#dhtml_select_dummy {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	padding:2px;
 }
</style>

<script language="javascript">
// this array controls the values and text for the options. The first values is the text, the second is the value.
dhtml_optionsArray = new Array(["option 1",1],["option 2",2],["option 3",3],["option 4",4]);
isExpanded = false;
clicked = false;

//constants
// these match the properties as defined in the style sheet.
FONT_SIZE = 10;
SELECT_HEIGHT = 18;
SELECT_WIDTH = 140;

function buttonClicked() {
	xDoc = document.getElementById;
	obj = document.getElementById("dhtml_select_options");
	if(!isExpanded) {
		obj.style.display="block";
		isExpanded = true;
		if(!clicked) {
			clicked=true;
			obj.style.position = "absolute";
			obj.style.top = (obj.style.top+SELECT_HEIGHT) + "px";
			obj.style.width = SELECT_WIDTH + "px";
			obj.style.borderStyle = "solid";
			obj.style.borderWidth="1px;";
			rPadding = dhtml_optionsArray.length*2;
			obj.style.height = (((dhtml_optionsArray.length) * FONT_SIZE) + rPadding) + "px";
			mHTML = "";
			for(i=0;i<dhtml_optionsArray.length;i++)mHTML += "<a class=\"dhtml_href\" href=\"javascript:handleSelect(" + i + ");\">" + dhtml_optionsArray[i][0] + "</a><br>";
			obj.innerHTML += mHTML;
		}
	} else {
		document.getElementById("dhtml_select_dummy").style.display="block";
		obj.style.display="none";
		isExpanded = false;
	}
	
}

function handleSelect(mID) {
	isExpanded = false;
	document.forms.frm1.dhtml_select_value.value =  dhtml_optionsArray[mID][1];
	document.getElementById("dhtml_select_dummy").innerHTML = dhtml_optionsArray[mID][0];
	document.getElementById("dhtml_select_dummy").style.display="block";
	document.getElementById("dhtml_select_options").style.display="none";
}

function doCover() {
	if(document.getElementById("cover").style.display == "block") {
		document.getElementById("cover").style.display = "none";
	} else {
		document.getElementById("cover").style.display = "block";
	}
}
</script>
DHTML Pseudo Select v2.0
last revision: 08.20.2003
steve@slayeroffice.com
http://www.slayeroffice.com