[英]document.getElementById returns null for my drop-down select menu
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/# ). 我正在尝试使用自定义CSS创建一个下拉选择菜单(类似于http://translate.google.com/#上的语言下拉选择)。
I have current html code: 我有当前的html代码:
<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: 和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. 但是document.getElementById返回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. 虽然如果我将代码与不包含选择列表的div元素一起使用,则document.getElementById(id)返回正确的div值。
How do I fix this? 我该如何解决? or is there a better way to create drop-down select menu like http://translate.google.com ? 还是有更好的方法来创建下拉选择菜单,例如http://translate.google.com ?
You've got your div placed inside of the select tag. 您已将div放置在select标记内。 I'm not sure this is valid, try moving the div outside of the select tag. 我不确定这是否有效,请尝试将div移到select标签之外。 As far as a better way, the dropdown at the link you've provided isn't using a select tag at all. 就一种更好的方式而言,您提供的链接中的下拉列表根本没有使用select标签。 It is simply styled to look like a dropdown menu, and is using a hidden div with all of the links inside of it. 它的样式简单,看起来像一个下拉菜单,并且使用了一个隐藏的div,其中包含所有链接。 I hope this helps! 我希望这有帮助! --> here's some free code to get you started. ->这是一些免费的代码,可以帮助您入门。 The CSS triangle trick comes at no extra charge ;) CSS三角技巧免费提供;)
<div id='fakeDropdown'>
<div class='triangle'> </div>
<div id='menu'>
<a href='#'> link </a>
<a href='#'> link </a>
<a href='#'> link </a>
<a href='#'> link </a>
</div>
</div>
CSS 的CSS
#fakeDropdown{
background-color: #888;
height: 30px;
width: 150px;
cursor: pointer;
}
#menu{
display: none;
background-color: #888;
height: 200px;
width: 800px;
position: relative;
top: 30px;
}
.triangle{
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid #000;
border-left: 10px solid #888;
border-right: 10px solid #888;
float: right;
margin-top: 5px;
}
JAVASCRIPT(assuming you're using jQuery) JAVASCRIPT(假设您使用的是jQuery)
$(document).ready(function(){
$('#fakeDropdown').hover(function(){
$(this).find('#menu').show('fast');
});
$('#fakeDropdown').mouseleave(function(){
$(this).find('#menu').hide('fast');
});
});
If you want a dropdown like Google Translate's, just look through the source code! 如果您想要像Google Translate的下拉列表,只需查看源代码即可! There is no <select>
element. 没有<select>
元素。 It's almost entirely CSS. 它几乎完全是CSS。
http://jsfiddle.net/mattball/BA4v3/1/ http://jsfiddle.net/mattball/BA4v3/1/
That's because you can't nest a div
tag within a select
tag. 那是因为您不能将div
标签嵌套在select
标签中。
Google's fancy drop down is not a select
tag at all, it's a set of div
elements with the appropriate Javascript to accomplish something similar to a classic select
element. Google的花式下拉菜单根本不是一个select
标签,它是一组带有适当Javascript的div
元素,可以完成类似于经典select
元素的操作。
You'll need to change up your markup a bit for this to work out. 您需要稍微修改标记才能解决此问题。
Here's a bunch of links to jQuery plugins/tutorials for creating custom drop-down menus. 这是用于创建自定义下拉菜单的jQuery插件/教程的链接。
check the value of alert(id): 检查alert(id)的值:
alert(id);
ddmenuitem = document.getElementById(id);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.