I've got this code to, in response to a selection from a select element, populate a second select element (with "placeholder" vals for now):

1. $(document).on("change", '[id$=ddlPaymentType1]', function () {
       var selects = [{ "1": [
                           ["value 1", "text 1"],
                           ["value 2", "text 2"]
                         ]
       },
                  { "2": [
                           ["value 1", "text 1"],
                           ["value 2", "text 2"]
                         ]
                  },
       /* Rest of your values here */
   ];
       var options = selects[$(this).val()];
   
   
       var $select = $('[id$=ddlAccount1]');
       $select.children().remove();
   
   
       //options.forEach(function (item) {
       $.each(options, function(item) {
           $select.append($("<option />").val(item[0]).text(item[1]));
       });
   });

The problem is (besides that it doesn't work) is that it makes browsers grumpy. When I run it in IE8, it says, when I select an item from the first select element (ddlPaymentType1):

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3)

Timestamp: Fri, 7 Aug 2015 18:24:55 UTC

Message: Script error

Line: 0

Char: 0

Code: 0

URI: https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

...IOW, IE basically throws up its hands and says, "Beats me what the problem is! I'll just say it's bad from the git-go!" 

Chrome, predictably, is more helpful, and tells me:

Uncaught TypeError: Cannot read property 'length' of undefinedm.extend.each @ jquery.min.js:2(anonymous function) @ FinAff_Demo_Page_Clay.aspx:1374m.event.dispatch @ jquery.min.js:3m.event.add.r.handle @ jquery.min.js:3

Line 1374 is:

1. $.each(options, function(item) {

How do I mend this broken jQuery function?