<select>仅显示所选选项的第一个字符

Question

我有一个标准的选择框,我通过附加选项使用jquery填充,但由于某种原因,IE9只显示所选选项的第一个字符.不用说它在FireFox和Chrome中完美运行,但我必须支持IE9.我尝试了IE9兼容模式,但它没有任何区别,也没有设置选择或选项的样式.

有没有人见过这个问题.是什么造成的？你怎么修好它的？

简化的代码示例:

<select id="selectCCY" ValueColumn="ccyID" DisplayColumn="ccySymbol" ></select>



$.each(res.result, function (key, value) {  
    $('#selectCCY').append('<option value="' + value[$('#selectCCY').attr('ValueColumn')]+ '">' + value[$('#selectCCY').attr('DisplayColumn')] + '</option>');
});

res.result是一个简单的json数组,如下所示:

[{"ccyID":1,"ccySymbol":"GBP"},{"ccyID":2,"ccySymbol":"AUD"},{"ccyID":3,"ccySymbol":"USD"}]

OH BUGGER !!! 它在我的简化示例中工作正常,因此问题出在其他地方.抱歉.原始代码在这里粘贴很长很复杂,但是当我找到答案时会通知您.

一段时间以后....

好的,我把问题归结为$(选择器).each()循环中的ajax调用.循环遍历所有选择框并异步填充选项.如果我进行同步调用,则选择框具有正确的宽度并正确显示,但如果是异步调用,则选择框仅显示图像中的第一个字符.仍在努力,将再次回到你身边.

我仍然想知道什么会导致选择框显示不正确.我可以做变通办法并让它正确显示,但这不能回答这个问题.它只是一个带有选项的选项,它应该始终正常工作,对吗？

经过一个周末无视这个问题......

对,我找到了解决方法.在执行ajax调用以填充选择框之前,我首先将css显示属性设置为'none',然后填充它,最后当ajax调用和填充完成时,我只删除css display'none'属性.

所以我仍然不知道为什么IE不喜欢我,但我们至少有一个解决方案.

Answer 1

在我的情况下,我没有事件挂钩来隐藏在ajax请求触发之前的选择,所以我不得不在事后强制重绘select元素.重新应用现有宽度似乎有效:

$("select").width($("select").width());

Answer 2

这是IE唯一的问题.首先将选择框上的css显示属性设置为'none',然后通过ajax调用填充它,最后当ajax调用完成并填充选择框时,删除选择框上的css display'none'属性

Answer 3

根据Jim的回答,我将下拉列表传递给这个方法:

// force redraw to get around bug in IE.
// NOTE that this removes width from the style attribute.
function forceRedraw(jqueryObject) {
    jqueryObject.css('width', 0);
    jqueryObject.css('width', '');  // remove from style tag
}

这解决了IE中的错误,只要在CSS中指定宽度而不是在style属性中指定宽度,就会在调用方法之前保留元素的宽度.