Removing/hiding a select option in javascript without making it look awkward (need to delay the native onclick event of the select element)

Question

code:
https://dl.dropboxusercontent.com/u/16952797/webdev/uppg1/kontakt.html
http://jsfiddle.net/v8uMJ/ (the result box does not succesfully render the page or reproduce the bug)

relevant code:

function addEvent(element, eventType, theFunction, capture)
{
    if(element.addEventListener)
    {
        element.addEventListener(eventType, theFunction, capture);
    } 
    else if(element.attachEvent)
    {
       element.attachEvent( "on" + eventType, theFunction);
    }
}

function removeDefaultOption(event)
{
    document.getElementById("selectSuggestion").options[0].style.display = "none";      // <-- looks awkward
    //document.getElementById("selectSuggestion").remove(0);                                            // <-- also looks awkward and needs boundaries so that all options don't get removed after each click
    //delay(1000);                                                                                                                  // <-- tried delaying the thread but it didn't work..
    //setInterval(function(){},1000);                                                                                   // <-- tried delaying the thread but it didn't work..
}

function addEventListeners()
{
...
    addEvent(document.getElementById("selectSuggestion"), "click", removeDefaultOption, false);
}

context: So what I'm trying to do is whenever you click on the select element in the suggestion form (swe: Förslag) I want the first option (value: --Välj Förslag--) to disappear from the list. The problem is that the options are displayed "too fast" so I either need to a) delay the displaying of the options after setting the style.display of the first option or b) I need to prevent the default event of clicking on select and then override it with my own function so I can control when it should be run (I don't know the name of the native function that is run when you click on the select element).

Answer 1

Use the "focus" event instead of the "click" event. This fires the function direclty when it's in focus instead of "waiting" for the click to be completed.

Cleaned JS-fiddle: http://jsfiddle.net/vhS3p/1/

document.getElementById("selectSuggestion").addEventListener("focus", removeDefaultOption, false);