Select menu closes once you click on it

Question

I create a <select> menu using Javascript then attach it to the page. But when I click on it, it closes immediately.

Here's my code, I'm stumpped.

var accounts = [
    ['user1', 'password'],
    ['user2', 'passowrd']
]

function html(){
    var button = '<a href="#" id="switchacc">Switch User</a>&nbsp;• &nbsp;';
    $('a[href=search.php]')[0].before(button);

    $('#switchacc').click(function(){
        $(this).html('<select id="accounts">'+ accountss +'</select>');
        return false;
    });


    var accountss = '';
    for(i = 0; i <= accounts.length; i++){
        accountss = accountss + '<option name="' + accounts[i][0] + '" value="' + i + '">' + accounts[i][0] + '</option>';
    }   
}
html();

Answer 1

Why are you embedding your select in that a link? See this fiddle for an example. You cannot embed a list in a link.