Question

我有以下代码 - 当用户点击只有加载的默认选项的下拉列表时，它用于加载下拉列表，因为此下拉列表非常大，IE不太喜欢它。这是代码：

function populateDropDown(id, code) {
    var currentSelect = document.getElementById(id);
    <%--Don't enable the dropdown if it has more than one entry already - assume this to be populated.--%>
    if(currentSelect.length == 1) {
            currentSelect.remove(0);
            var selectedIndex = 0;
            for(var index = 0; index < codes.length; index++) {
                    var newOption = document.createElement('option');
                    newOption.value = codes[index];
                    newOption.text = values[index];
                    try {
                            currentSelect.add(newOption, null); // standards compliant
                    }
                    catch(ex)
                    {
                            currentSelect.add(newOption); // IE only
                    }
                    if(codes[index] == code) {
                            selectedIndex = index;
                    }
            }
            currentSelect.selectedIndex = selectedIndex;
    }
}

此代码适用于Opera 9.x，IE 7 - 但不适用于IE 6（我在Opera中测试因为我喜欢Opera Dragonfly - 但它实际上只能在IE 7和6中工作）。

在IE 6中，代码会填充下拉列表，但会将所选值设置为下拉列表中的第一个值，而不是所选值。在所提到的其他两个浏览器中，所选值被设置为正确的值。

我无论如何都不是Javascript大师 - 所以如果有人知道为什么IE 6会这样做以及如何绕过它，那将不胜感激。另请注意，注释中有一条JSP注释 - 在将此Javascript发送到浏览器之前它被删除（它不是无效注释）。

Answer 1

我之前遇到过这个问题。如果在将焦点返回到文档之前尝试访问select元素（选项）的动态创建子元素，则设置selectedIndex将失败并默认为第一个项目。

当我找到我发现修复的文章时，我会回发。请继续关注！

<强>更新

发现它！

不是在selectedIndex元素上设置<select>，而是找到所需的<option>元素并将其“selected”属性设置为true：

var currentSelect = document.getElementById(id);
if(currentSelect.length == 1) {
        currentSelect.remove(0);
        var selectedIndex = 0;
        for(var index = 0; index < codes.length; index++) {
                var newOption = document.createElement('option');
                newOption.value = codes[index];
                newOption.text = values[index];
                try {
                        currentSelect.add(newOption, null); // standards compliant
                }
                catch(ex)
                {
                        currentSelect.add(newOption); // IE only
                }
                if(codes[index] == code) {
                        selectedIndex = index;
                }
        }
        // currentSelect.selectedIndex = selectedIndex;
        // Try this:
        currentSelect.options[selectedIndex].setAttribute('selected', true);
}

Answer 2

Cory的评论帮助了我，但他的代码没有产生我希望在IE 6下的结果。但是，他指出焦点可能是问题所在。下面的片段使它在IE 6下正确选择 - 它看起来很奇怪，因为它加载下拉然后选择它，但功能是我想要的，它比静态HTML加载更快。

currentSelect.focus();
currentSelect.selectedIndex = selectedIndex;

关注输入，然后设置所选索引，在IE 6中工作 - 虽然下拉列表跳转到第一个输入非常快，然后跳回。但是，只要它有效......

IE 6 Javascript取代选择下拉列表问题

2 个答案: