document.getElementById returns null for my drop-down select menu
- by tucson
I am trying to create a drop-down select menu with custom css (similar to the drop-down selection of language at http://translate.google.com/#).
I have current html code:
<ul id="Select">
<li>
<select id="myId"
onmouseover="mopen('options')"
onmouseout="mclosetime()">
<div id="options"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<option value="1" selected="selected">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</div>
</select>
</li>
</ul>
and the Javascript:
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
But document.getElementById returns null.
Though if I use the code with a div element that does not contain a select list the document.getElementById(id) returns proper div value.
How do I fix this? or is there a better way to create drop-down select menu like http://translate.google.com ?
