基于不在IE中工作的optgroup更新选择选项

Question

我为一个客户端建立了一个定制的商店，他对我的select下拉菜单的更新有问题。我之所以这样说，是因为它在现代浏览器甚至IE7+中都能正常工作，所以我不太确定如何解决这个问题。

当用户更改产品下拉列表时，传递选项下拉更新以反映该产品的选项。他看到的问题是，它根本没有改变选项(这使得结帐失败--我知道，我也在做非JS /JS失败的退路，但我也希望JS版本也能工作)。

下面是我的下拉列表的(截断) HTML：

<select id="product" name="product">
    <option value="1">3 Man Chess Primary Set includes FREE shipping in Contiguous USA. [ $49.95 ]</option>
    <option value="999">Digital Download [ $0.99 ]</option>
</select>

<select id="location" name="location">
    <optgroup label="3 Man Chess Primary Set includes FREE shipping in Contiguous USA." id="1">
        <option value="1">Contiguous U.S.A.  (UPS Ground)</option>
        <option value="2">Alaska &amp; Hawaii (Priority Mail)</option>
        <option value="3">Canada (Priority Mail)</option>
    </optgroup>
    <optgroup label="Digital Download" id="999">
        <option value="50">E-mail</option>
    </optgroup>
</select>

我循环遍历select的optgroup，并将每个选项中的HTML设置为一个由ID命名的变量(这是更改的内容)。产品ID和位置选项ID匹配。

var amtList = Array {

    [ ... ]

    optgroups: Array[1000] {
        1: "<option value="1">Contiguous U.S.A.  (UPS Ground)</option>
            <option value="2">Alaska &amp; Hawaii (Priority Mail)</option>
            <option value="3">Canada (Priority Mail)</option>"
       999: "<option value="50">E-mail</option>"
}

这是实际进行切换的代码：

$("#product").change(function(){
    $("#location").html( amtList["optgroups"][ $(this).val() ] );
});

这是他给我的规格，他说不起作用。我让他运行启用JavaScript和WhatBrowser网站来获取规范。

ipad已经启用了JavaScript &SafariMobile5(我故意不升级新的，因为新的不符合我对旧版本的需求)。载重但缓慢 XP旧办公计算机启用了JavaScript & IE7从不加载 我的HP win 7双proc 64位已启用JavaScript & IE9从不加载 另一台XP双proc 64位计算机，但只有32位XP启用了JavaScript & IE8从不加载

知道为什么它不会更新这些机器上的菜单吗-is，还有一些我忽略的向后兼容性问题？在我所有的现代浏览器上，IE11似乎都运行得很好(IE11在IE7-10模式下的开发似乎对我来说都很好)。

jsFiddle：http://jsfiddle.net/daCrosby/pTKL5/1/

现场直播：http://3manchess.com/

Answer 1

将console.log调用留在代码中会导致在没有安装任何console的浏览器中引发错误。这将包括IE7和IE8，除非用户已经安装了并非所有版本的IE都可用的开发工具。

有许多可用的包装器或shims，您可以将它们添加到代码中，以检查console是否存在，如果不处理，则不会出现错误。