document.getElementById 为我的下拉选择菜单返回 null答案

【问题标题】：document.getElementById returns null for my drop-down select menudocument.getElementById 为我的下拉选择菜单返回 null
【发布时间】：2011-03-18 16:08:54
【问题描述】：

我正在尝试使用自定义 css 创建一个下拉选择菜单（类似于http://translate.google.com/# 的语言下拉选择）。

我有当前的 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>

和 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';

}

但是 document.getElementById 返回 null。

虽然如果我将代码与不包含选择列表的 div 元素一起使用，则 document.getElementById(id) 会返回正确的 div 值。

我该如何解决这个问题？还是有更好的方法来创建像http://translate.google.com 这样的下拉选择菜单？

【问题讨论】：

您链接到的网站上的下拉菜单实际上并不是 HTML select 元素——它们的外观和行为与使用 JavaScript/CSS 类似。您可能会找到 JavaScript 库、jQuery 插件等，让您轻松完成这项工作。

标签： javascript html select

【解决方案1】：

您已将 div 放置在 select 标记内。我不确定这是否有效，请尝试将 div 移到 select 标签之外。至于更好的方法，您提供的链接上的下拉菜单根本没有使用选择标签。它的样式很简单，看起来像一个下拉菜单，并且使用了一个隐藏的 div，其中包含所有链接。我希望这有帮助！ --> 这里有一些免费代码可以帮助您入门。 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

#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（假设您使用的是 jQuery）

$(document).ready(function(){

    $('#fakeDropdown').hover(function(){
       $(this).find('#menu').show('fast');
    });

    $('#fakeDropdown').mouseleave(function(){
        $(this).find('#menu').hide('fast');
    });

});

JSfiddle example

【讨论】：

【解决方案2】：

如果您想要类似 Google 翻译的下拉菜单，只需查看源代码！没有<select> 元素。它几乎完全是 CSS。

http://jsfiddle.net/mattball/BA4v3/1/

【讨论】：

【解决方案3】：

这是因为您不能将 div 标记嵌套在 select 标记中。

Google 的精美下拉菜单根本不是 select 标记，而是一组 div 元素和适当的 Javascript 来完成类似于经典 select 元素的操作。

您需要稍微更改一下标记才能解决问题。

【讨论】：

【解决方案4】：

这里有一堆用于创建自定义下拉菜单的 jQuery 插件/教程链接。

【讨论】：

【解决方案5】：

检查alert(id)的值：

alert(id);
ddmenuitem = document.getElementById(id);

【讨论】：