javascript dependant drop down not working in IE 8

Question

I have searched through here to find a javascript drop down that changes based on another drop down and the code I have works in Chrome. However, it doesn't work in IE 8.0.6 and I was wondering if anyone could highlight the part that isn't working, or suggest another workaround (JQuery, CSS etc).

When I load this in IE, the second drop down is completely blank. The first drop down has a variation of the arrays, when a user selects one of those, they are then presented with the options in the array. So if I select iAffordability, i will be presented with the three values in the array.

Here is the code I am using

iAffordability = new Array("Unable to Get Mortgage", "Cant Afford to Move", "Price");
iDisintruction = new Array("Branch Disinstructed");
iCourtOrder = new Array("Court Order");
iLackofComms = new Array("Marketing", "Viewings", "Offers");
iLackofOffers = new Array("Not Happy with Amount", "Not Happy with Quality");

populateSelect();

$(function () {

    $('#WD').click(function () {
        populateSelect();
    });

});


function populateSelect() {
    WD = $('#WD').val();
    $('#Sub').html();


    if (WD == 'iAffordability') {
        $('#Sub').empty();
        iAffordability.forEach(function (t) {

            $('#Sub').append('<option>' + t + '</option>');
        });
    }

    if (WD == 'iDisintruction') {
        $('#Sub').empty();
        iDisintruction.forEach(function (t) {
            $('#Sub').append('<option>' + t + '</option>');
        });
    }

    if (WD == 'iLackofComms') {
        $('#Sub').empty();
        iLackofComms.forEach(function (t) {
            $('#Sub').append('<option>' + t + '</option>');
        });
    }

    if (WD == 'iLackofOffers') {
        $('#Sub').empty();
        iLackofOffers.forEach(function (t) {
            $('#Sub').append('<option>' + t + '</option>');
        });
    }

}

JS Fiddle

UPDATE:

The code worked, I just had to add in:

if (!window.console) console = {log: function() {}};

to my existing JS.

Answer 1

I'm going to suggest a refactoring and DRYing of your code:

var lists = {
    iAffordability: ["Unable to Get Mortgage", "Cant Afford to Move", "Price"],
    iDisintruction: ["Branch Disinstructed"],
    iCourtOrder: ["Court Order"],
    iLackofComms: ["Marketing", "Viewings", "Offers"],
    iLackofOffers: ["Not Happy with Amount", "Not Happy with Quality"]
};

$(function () {
    populateSelect();
    $('#WD').change(function () {
        populateSelect();
    });
});

function populateSelect() {
    var WD = $('#WD').val(), $sub = $('#Sub');
    $sub.empty();
    $.each(lists[WD] || ["Error"], function(_, t) {
        $sub.append('<option>' + t + '</option>');
    });
}

This should work even in older versions of IE because it uses the jQuery $.each function instead of Array.prototype.forEach - as RobG pointed out, this function was only added in IE9 (ah, if only IE forced itself to update like Chrome does...) and it should be much easier to expand in future.