Question

I would expect this:

$('.iat_map').each(function(i,el) {
    $(el).html(opt_list);
});

And this:

$('.iat_map').html(opt_list);

To do the same thing. However, when I try the former, it clears the contents instead of replacing it with opt_list. (.iat_map refers to a bunch of <selects>).

If I console.log(opt_list) inside that each(), it ouputs as expected.

What gives?

Made a fiddle. Perfectly reproducible (in Chrome 21 at least).

Answer 1

The problem is that opt_list is a jQuery object (meaning jQuery made the options into DOM elements), and when you append jQuery object, the DOM elements are removed from their old spot and added to their new spot.

That’s why when you use .each, you’ll notice that the options are only on the last select.

Apparently, when you do $('.iat_map').html(opt_list);, jQuery clones the DOM elements before appending them.

I suggest making opt_list into a string, instead of a jQuery object.