Question

I am cloning a select dropdown and populating it with new options:

var oldSelect = $("select[name='old']")
var newSelect = oldSelect.clone(true);
newSelect.html(newoptions);
oldSelect.replaceWith(newSelect);

This brings along a change event that was bound earlier:

$("select[name='old']").bind('change', function(){ update(); });

My new select works, and the update event fires correctly, but the option that the user selects does not appear in the box (see attached image).

Answer 1

It turns out, the update function that was executed on change was redrawing the select box, which reset the selected option back to null. It happened so quickly that I didn’t notice the replacement.