Jquery 1.10.2 $.each function not working

Question

Ok, first let me describe my HTML.

I have a select list name and ID as upload_Gcat that has three options. I then have a select list name and ID as upload_album. What I want is as upload_Gcat is changed upload_album changes its options according to what was selected. I have gotten my query to work as far as removing the old. But when it reaches my $.each function it does not work.

I have tried various different code lines inside the $.each function, even tried the bad debug way of alerts, no alert showed up while inside of $.each.

var new_options = new Array();
new_options["album1"] = "album1";
new_options["album2"] = "album2";
new_options["album3"] = "album3";

var select = $('upload_album');
if(select.prop){
    var options = select.prop('options');
}
else{
    var options = select.attr('options');
}

$('option', select).remove();

$.each(new_options, function(key, value) {
    options[options.length] = new Option(value, value);
});

Answer 1

You may try this (Use an object instead of array, JavaScript doesn't support associative array)

var new_options = {}; // an empty object
new_options["album1"] = "album1";
new_options["album2"] = "album2";
new_options["album3"] = "album3";

var select = $('#upload_album').empty();
$.each(new_options, function(key, value) {
    var newOption = $('<option/>', {'value':key, 'text':value});
    select.append(newOption);
});

DEMO. Also, check Working with objects on MDN.