Setting value of dynamically generated drop down selector

Question

I have a drop down select menu that is generated dynamically. Its generated using the html select syntax which is then simply inserted using the .after method. And then I use ajax call to get elements of the selector and fill it like this.

 $($.parseJSON(msg)).map(function () {
      return $('<option>').val(this.id).text(this.name);
  }).appendTo('#item');

Now After this code populates the 'item' drop down menu I have to set it to the some element, say the fifth. So I tried to do it like this.

$('#item').val('5');

I have even tried to specifically identify the item. Since its in html table, like this.

$("#itemTable > tfoot > tr.items").find("td:eq(0) [name='item']").val('5');

The above code works fine in other situations when I have a drop down manually created. So I figured both the above attempts are not actually identifying the 'item' drop down component. So is there any other way I can try this?

Answer 1

jquery documentations for map() says: "If you wish to process a plain array or object, use the jQuery.map() instead."

Your dropdown will not get populated (check console for errors) and so setting any value to #item will not work.

Try this:

var options = $.map($.parseJSON(msg), function (n, i) {
    return $('<option>').val(n.id).text(n.name);
});
$("#item").append(options);

With this code, drowdown will get populated and then $("#item").val("5") will work.

JSFiddle: http://jsfiddle.net/6Us9N/