Inconsistent results when loading HTML snippet into select tag

Question

I'm using Ajax to load the contents of a select:

<select id = "idResultEntryMeet" class="form-control input-md" size = 1>
</select>
...
$('#idResultEntryMeet').mousedown(function() { 
   $.post("/cgi-bin/listOptions", function(data) {
      $('#idResultEntryMeet').html(data);
   });
});

This isn't consistent across browsers, which makes me think that there's a problem with the code:

1. IE9 never shows anything in the select
2. FF 27 works as expected
3. Chrome and IE11 don't show anything in the pull-down on the first mouse click, but will show the expected contents on the second mouse click. I can fix this on both browsers by pre-loading the select during the initial page load
4. Opera and Safari require a second mouse click, even with an initial preload

Any suggestions on what's wrong with this?

EDIT Sorry, guess this wasn't obvious: the select must be dynamic. The options are constantly changing, depending on the contents of a database. The idea is that the user sees the current options when they click the pull-down on the select. Using a click (instead of mousedown) handler doesn't work, since the user can't then actually select anything they see in the pull-down.

And the CGI code returns an HTML snippet, containing the options. Firebug shows a correctly-formed select containing options on completion of the POST.

EDIT The problem is that the Ajax request has to be synchronous (Sjax?) (as more-or-less suggested in the comments), to prevent interfering with whatever happens when the select pull-down is activated. This code works with proper browsers (and almost works in IE9), but changing async to true causes consistent problems with various browsers:

$('#idResultEntryMeet').mousedown(function() {
   $.ajax({
      type  : "POST",
      url   : "/cgi-bin/listOptions",
      async : false
   }).done(function(data, textStatus, jqXHR) {
      $('#idResultEntryMeet').html(data);
   });
});

Answer 1

Try that (just tested on chrome):

$('#idResultEntryMeet').on('mousedown', function(e){
    if(!e.view) return;
    e.preventDefault();    
    var _self = this;
    $.post("/cgi-bin/listOptions", function (data) {
        $(_self).html(data);
         var mdwn = document.createEvent("MouseEvents");
        mdwn.initMouseEvent("mousedown", false, false, null, 0, 0, 0, 0, 0, true, false, false, true, 0, null);
        _self.dispatchEvent(mdwn);
    });
});

Simplified DEMO

EDIT: doesn't work on FF nor IE...

Answer 2

Try change your code for:

html

<select id="idResultEntryMeet" class="form-control input-md" size="1">      
</select>

js

$(document).ready(function() { 
   $.post("/cgi-bin/listOptions", function(data) {
     $('#idResultEntryMeet').html(data);
   });
});

$('#idResultEntryMeet').change(function() { 
   var valueSelected = $(this).val();
   alert(valueSelected);
   //Do something
});

Edit: you need include the delegate bind with jquery for do this dinamic.

$('#idResultEntryMeet').bind("click", function() {
    var data = '<option value="volvo">Volvo</option><option value="saab">Saab</option>';
    $('#idResultEntryMeet').html(data);
});

And need format the return of the method some like this