Now next your going to add the select element to the document

    <select name="" onchange="selected(this.value);" id="stateSelect" size="3">
            <option value="">Select a State</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
    </select>

I'm taking a short cut and leaving out the other 45 states. I also added an onchange="selected(this.value)" event to the select object and gave it an id of stateSelect.

So let's add our JavaScript to the head of our document.

<script type="text/javascript">
    populate = function() {
        if (document.getElementById('stateSelect').style.display == "block") {
            document.getElementById('stateSelect').style.display = "none";
        } else {
            document.getElementById('stateSelect').style.display = "block";
        }
    }  

    selected = function(item) {
        alert(item)
        document.getElementById('stateSelect').style.display = "none";
    }
</script>

The function populate will first test the display attribute(css) of the stateSelect object and upon the results we will decide to display or hide the drop down menu. So if style.display == "block" we are going to hide the select element and vice versa. This all happens from the onclick() event in the image link.

In function selected() we are going to capture the selected option from the onchange() event and hide the select object.

Now all that's left is too add our style sheet to the page. As so:

<style type="text/css">
    .box {
        width:150px;
        /* We want the select element and image to be vertical and not next to each other */
    }

    .box a {
       padding:0px;
       margin:0px;
    }

    img {
        border:0px; 
         /* Turn image boards off here. It looks better than doing it in the html */
        margin:0px;
        padding:0px;
    }  

    #stateSelect {
        display:none;  
        /* This is the most important attribute for the stateSelect object. */
        margin-left:4px;
    }

    .box select {   /* Add some style to the select object */
        background:#3d7b22;
        border:1px #3d7b22 solid;
        color:#ffffff;
    }
</style>
   
The css .box class is used to hold our elements in a confined space so the image will sit above the select object. The most important attribute in all the css is that we set #stateSelect to hidden(display:none), so that it does not appear when the page loads. It should only appear when the image link is clicked.

The differences between this drop down menu and the previous one that I wrote about and created was that the last one was being created dynamically(on the fly) from Javascript arrays and could be easily adapted for Ajax (Asynchronous data).

Give it a try: Custom Select Element.