Dropdown filled using $.ajax call

Dropdown filled using $.ajax call

I have a dropdown whose options get filled dynamically: 

var dropdownMenu = "<select id=\"NRdropdown_" + i + "\" onClick=\"populateDropDown(" + i + ")\"><option>Existing Blocks</option>"

populateDropdown(dropdownNum):
1.  Makes the ajax request
2.  Parses the json response for the option values into an html string called optionsHtml
3.  Replaces the inner html of the select element with the option values via:
var dropdownSelector = "#NRdropdown_" + dropdownNum;
$(dropdownSelector).html(optionsHtml)

1.  When I click on the dropdown arrow, I STILL see "Existing Blocks".
2.  After 1 sec I see the first dynamically generated option UNDERNEATH the "Existing Blocks" option, I don't see the other dynamically generated options.
3.  Then I click outside the dropdown and see the dropdwon showing the first dynamically generated value.
4.  Then I click the dropdwon again and it works as it should with all the dynamically generated values. 

How do I make it work as it should:
When the page first loads, the dropdown shows "Existing Blocks".  Once I click the dropdown arrow, the dropdown should show all dynamically generated values without the "Existing Blocks" value.  Thanks!