jQuery在IE浏览器中无法正常工作

Question

我有一段代码，在火狐浏览器中可以正常工作，但在IE浏览器中无法正常工作。根据第一个下拉框选择的值，第二个下拉框中的某些值会被隐藏。在火狐浏览器中，这些值被正确地隐藏了，但在IE浏览器中却全部显示出来：

function updateMountingMethod() {
    var selectedVal = $('#attrib-13 option:selected').text().split(" ")[0];
    $.each($("#attrib-7").children(), function() {
        var optionText = $(this).text();
        var values = optionText.split('|')[1];
        if (values != undefined) {
            if (values.substring(1, 3) != selectedVal) {
                $(this).css('display', 'none');
            }
            else {
                $(this).text($(this).text().split("|")[0] + $(this).text().split("|")[2]);
            }
        }
    })
}

如果这不够清楚，下面有更好的描述。

我有一个jQuery代码，每次下拉菜单值改变时都会调用它。当值改变时，它获取所选元素的大小。显示的值看起来像11英尺、15英尺、19英尺，所以我将其拆分，只获取数字而不是英尺。根据所选的值，它需要更新以下格式的下一个下拉菜单：

Item 1 | 11'11" |
Item 2 | 15'9"  |
Item 3 | 19'9"  |
...

我不希望在| |之间显示任何内容，它只是为了将每个项目与所选长度匹配（即选择了第一个下拉菜单中的11英尺选项，那么第二个下拉菜单中只显示11'11"选项）。有人能告诉我为什么这些额外的值在IE中没有被隐藏吗？

- dan

---

你的代码看起来很直接，但我想知道你测试的IE版本是否支持<option>标签上的CSS属性。你可以添加一个<select>框并加入一些<option>，其中一些包括<option style="display:none">，另一些则不包括。如果它不奏效，那么你需要采用另一种方法。通常对于像这样的多级选择，我会将数据结构存储在代码中，然后动态地删除和添加正确的次要<option>。另一种方法可能是将属性disabled添加到你要禁用的选项中。 - artlung

Answer 1

在这种情况下，我首先要做的是验证HTML是否符合W3C标准；通常在IE中出现问题是因为HTML不是100%兼容的。请参阅http://hogsmill.wordpress.com/info/以获取一些我发现的注意事项。

- Hogsmill