依赖javascript的下拉菜单在ie8中不起作用

javascript dependant drop down not working in IE 8

本文关键字：ie8 不起作用 下拉菜单 javascript 依赖      更新时间：2023-09-26

我在这里搜索了一个javascript下拉菜单，根据另一个下拉菜单和我在Chrome中工作的代码进行更改。但是，它在IE 8.0.6中不起作用，我想知道是否有人可以突出显示不起作用的部分，或者建议另一个解决方案(JQuery, CSS等)。

当我在IE中加载这个时，第二个下拉框是完全空白的。第一个下拉列表是数组的变体，当用户选择其中一个时，就会显示数组中的选项。因此，如果我选择iAffordability，我将看到数组中的三个值。

下面是我使用的代码

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小提琴更新:

代码可以工作，我只需要添加:

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

我建议重构和干燥你的代码:

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>');
    });
}

这应该可以在旧版本的IE中工作，因为它使用jQuery的$.each函数而不是Array.prototype.forEach -正如RobG指出的，这个函数只在IE9中添加(啊，如果只有IE强迫自己像Chrome一样更新…)，它应该更容易在未来扩展。

相关文章：