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

Question

我正在尝试使用自定义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这样的下拉选择菜单？

Answer 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的例子