CODEWITHSUNDEEP
javascripthtmlselect
Timothée HENRY
Timothée HENRY

Reputation: 14604

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/#).

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 ?

Upvotes: 0

Views: 4372

Answers (5)

Hacknightly
Hacknightly

Reputation: 5144

You've got your div placed inside of the select tag. I'm not sure this is valid, try moving the div outside of the select tag. As far as a better way, the dropdown at the link you've provided isn't using a select tag at all. It is simply styled to look like a dropdown menu, and is using a hidden div with all of the links inside of it. I hope this helps! --> here's some free code to get you started. The CSS triangle trick comes at no extra charge ;)

<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(assuming you're using jQuery)

$(document).ready(function(){

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

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

});

JSfiddle example

Upvotes: 5

no.good.at.coding
no.good.at.coding

Reputation: 20371

Here's a bunch of links to jQuery plugins/tutorials for creating custom drop-down menus.

Upvotes: 1

Matt Ball
Matt Ball

Reputation: 359816

If you want a dropdown like Google Translate's, just look through the source code! There is no <select> element. It's almost entirely CSS.

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

Upvotes: 2

Andrei Andrushkevich
Andrei Andrushkevich

Reputation: 9973

check the value of alert(id):

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

Upvotes: 0

wsanville
wsanville

Reputation: 37516

That's because you can't nest a div tag within a select tag.

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.

You'll need to change up your markup a bit for this to work out.

Upvotes: 1

Related Questions