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

我想创建一个自定义CSS下拉选择菜单（类似于下拉选择的语言在http://translate.google.com/#）。document.getElementById返回null为我的下拉选择菜单

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

来源

2011-03-18 tucson

网站上的下拉菜单链接到您实际上不是HTML'select'元素 - 它们是由外观和行为像使用JavaScript/CSS。你可能会找到JavaScript库，jQuery插件等，它们可以让你以最小的努力做到这一点。 – 2011-03-18 16:14:49

你已经将你的div放在select标签中。我不确定这是否有效，请尝试在选择标记之外移动div。就更好的方式而言，您提供的链接上的下拉菜单根本不使用选择标签。它看起来像一个下拉菜单，并使用一个隐藏的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

来源

2011-03-18 16:11:35 Hacknightly

那是因为你不能在select标记中嵌套div标记。

谷歌的喜爱下拉不是select标签的话，那是一组与相应的JavaScript div元素来完成类似的经典元素select东西。

您需要稍微更改标记以解决此问题。

来源

2011-03-18 16:12:51 wsanville

检查警报（ID）的值：

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

来源

2011-03-18 16:13:13

如果你想要一个像谷歌下拉转换的，只是通过看源代码！没有<select>元素。它几乎完全是CSS。

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

来源

2011-03-18 16:16:10

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

来源

2011-03-18 16:19:30

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

回答

相关问题