<选择>只显示所选选项的第一个字符 [英] &lt;select&gt; only shows first char of selected option

问题描述

我有一个标准的选择框，我通过附加选项使用 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":美元"}]

哦，臭虫！！！它在我的简化示例中运行良好，所以问题出在其他地方.对不起.原始代码冗长复杂，无法粘贴在这里，但我会在找到答案后通知您.

一段时间后....

好的，我将问题归结为 $(selector).each() 循环内的 ajax 调用.循环遍历所有选择框并异步填充选项.如果我将其设为同步调用，则选择框具有正确的宽度并正确显示，但如果是异步调用，则选择框仅显示图像中的第一个字符.仍在处理此问题，会再次联系您.

我仍然想知道什么会导致选择框显示不正确.我可以做一些解决方法并让它正确显示，但这并不能回答问题.它只是一个带有选项的选择，它应该始终有效，对吗?

在忽略这个问题一个周末之后......

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

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

解决方案

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

I have a standard select box which I'm populating using jquery by appending options, but for some reason IE9 only shows the first character of the selected option. Needless to say it works perfectly in FireFox and Chrome, but I have to support IE9. I tried the IE9 compatibility modes, but it made no difference, nor does styling the select or option.

Has anyone seen this issue before. What caused it? How did you fix it?

Simplified code sample:

<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 is a simple json array like this:

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

OH BUGGER!!! it works fine in my simplified example, so the problem is somewhere else. Sorry. The original code is to long and complex to paste here, but will let you know when I find the answer.

some time later....

OK, I got the problem down to an ajax call inside a $(selector).each() loop. The loop goes through all select boxes and asyncronously populates the options. If I make it a syncronous call, the select boxes have the correct width and show correctly, but if its an async call the select boxes only show the first char as in the image. still working on this, will get back to you again.

I still want to know what would cause a select box to display incorrectly. I can do workarounds and get it to show correctly, but that doesn't answer the question. It's just a select with options in it, it should always just work, right?

after a weekend of ignoring the issue ....

Right I found a workaround. Before doing the ajax call to populate the select box I first set the css display property to 'none' on it, then populate it and finally when the ajax call and population is complete I just remove the css display 'none' property.

So I still don't know why IE doesn't like me, but we have a solution at least.

解决方案

It is an IE only problem. First set the css display property on the select box to 'none', then populate it via your ajax call, finally when the ajax call is done and the select box is populated remove the css display 'none' property on the select box

这篇关于<选择>只显示所选选项的第一个字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！