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

我有一个标准的select框，我通过附加选项使用jquery填充，但由于某种原因，IE9只显示选定选项的第一个字符。 毋庸置疑，它在FireFox和Chrome中是完美的，但我必须支持IE9。 我尝试了IE9的兼容模式，但没有什么区别，也没有样式的select或选项。

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

简化的代码示例：

<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 !!! 它在我简化的例子中工作正常，所以问题在别的地方。 抱歉。 原始的代码是漫长而复杂的粘贴在这里，但会让你知道，当我find答案。

一段时间之后….

好的，我把问题归结为$（selector）.each（）循环内的ajax调用。 循环遍历所有select框并asynchronous填充选项。 如果我把它作为一个同步调用，select框有正确的宽度和正确显示，但如果它的asynchronous调用select框只显示图像中的第一个字符。 仍然在这个工作，将再次回到你身边。

我仍然想知道什么会导致select框显示不正确。 我可以做变通办法，让它正确显示，但是这并不能回答这个问题。 这只是一个选项，它应该总是工作，对不对？

经过一个周末忽略了这个问题….

对，我find了一个解决方法。 在做Ajax调用来填充select框之前，我首先将css显示属性设置为'none'，然后填充它，最后当ajax调用和填充完成时，我只是删除css显示'none'属性。

所以我仍然不知道为什么IE不喜欢我，但至less我们有一个解决scheme。

Answer 1

在我的情况下，我没有一个事件钩子来隐藏select之前的ajax请求触发，所以我不得不强制重新select元素之后的事实。 重新应用现有的宽度似乎工作：

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

Answer 2

这是一个IE唯一的问题。 首先将select框的CSS显示属性设置为'none'，然后通过ajax调用填充它，最后当ajax调用完成并且填充select框时，在select框中删除css显示'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属性中指定元素的宽度，就会保留元素的宽度。

Answer 4

我正在使用angularjs，也在ie8 / ie9中遇到这个问题这种方法/解决方法为我工作：例如用html看起来像这样：

 <select ng-show="data.showSelect" ng-cloak ng-model="data.model" ng-options="l.id as l.name for l in data.items></select> 

我已经加载下拉列表的数据后运行这个代码，它修复了这个问题

 $timeout(function(){$scope.data.showSelect = true;},100); 

我想你也可以把这个包装成一个指令，如果你有多个区域需要这个解决方法。

Answer 5

我在我的情况有callback，所以设置显示为没有被填充时不是我的select，但是，我可以详细说明@Daniel Brinks答案解决我的问题..一旦任何项目被添加和显示从无到无，所有未来添加的项目将罚款..使用jQuery和小部件..所以，如果你正试图解决您的小工具在IE中工作这可能是有用的你..

在widget的_create函数中：

 this.availableFields = $("<select multiple='multiple' name='AvailableFields'></select>") .addClass("ui-fieldselector-available-select") .css("display", "none") .appendTo( this.element ); 

在widget的_init函数中：

buildAvailableItem – 添加到select

然后添加到跟踪窗口小部件状态的数组中

 var $this = this; //IE HACK Part 1-- $this.buildAvailableItem("Loading...", "Loading..." ); $this.availableList.push("Loading..."); //---------------- //do stuff, here I initialize some functionality, like drag and drop, add click events, etc. //IE HACK Part 2-- $($this.availableFields).css("display", ""); $this.removeAvailableOption("Loading..."); //---------------- // AJAX adding 

我通常使用一个名为addAvailableItem的函数来处理构build项目并将其添加到列表中，但是这也触发了一个事件，并且我不希望触发“正在加载…”项目的事件。

如果由于某种原因，有人使用非常慢的浏览器，他们会看到“加载…”，然后删除和ajax项目被添加..

如果有人想要更多的复制和粘贴友好的版本让我知道

这里的参考是build立项目：

 buildAvailableItem: function (display, value) { $("<option>" + display + "</option>").val(value).appendTo(this.availableFields); }, 

Answer 6

在angular.js的selectDirective的render函数中添加几行以下的地方（用粗体标记为**）对我来说工作得很好。 我正在寻找是否有任何其他可能的解决scheme，而不是修补angularJS或forEach下面给出？

 if (existingOption.label !== option.label) { lastElement.text(existingOption.label = option.label); **lastElement.attr('label', existingOption.label);** } 

和

  (element = optionTemplate.clone()) .val(option.id) .attr('selected', option.selected) .text(option.label); **element.attr('label', option.label);** 

问题是如果IE中的标签是空白的，那么HTMLOptionElement的标签属性与text属性不同。

这可以通过在屏幕加载之后添加以下代码来validation，并查看FF和IE的Web控制台以查看区别。 如果您取消注释标签设置为文本的最后一行，则可以正常工作。 或者如上所述修补angular.js。

 // This is an IE fix for not updating the section of dropdowns which has ng-options with filters angular.forEach($("select"), function (currSelect) { console.log("1.text ", currSelect.options[currSelect.selectedIndex].text); console.log("1.label ", currSelect.options[currSelect.selectedIndex].label); //console.log("1.innerHTML ", currSelect.options[currSelect.selectedIndex].innerHTML); //console.log("1.textContent ", currSelect.options[currSelect.selectedIndex].textContent); //console.log("1.cN.data ", currSelect.options[currSelect.selectedIndex].childNodes[0].data); //console.log("1.cN.nodeValue ", currSelect.options[currSelect.selectedIndex].childNodes[0].nodeValue); //console.log("1.cN.textContent ", currSelect.options[currSelect.selectedIndex].childNodes[0].textContent); //console.log("1.cN.wholeText ", currSelect.options[currSelect.selectedIndex].childNodes[0].wholeText); //console.log("1. ", currSelect.options[currSelect.selectedIndex], "\n"); //currSelect.options[currSelect.selectedIndex].label = "xyz"; //currSelect.options[currSelect.selectedIndex].label = currSelect.options[currSelect.selectedIndex].text; }); 

Answer 7

我刚刚通过更改select元素被初始化（在jQuery小部件中dynamic创build）来解决同样的问题。

例子A

这不起作用：

 var select = $('<select size=7>') // IE9 'first character' bug 

这样做：

 var select = $('<select>').attr('size', 7) // Yay 

例子B

同样，以下不起作用：

 self.element.append('<select name="mySelect">'); // IE9 'first character' bug 

而这将会：

 var mySelect = $('<select>').attr('name', 'mySelect'); self.element.append(mySelect); 

结论

我希望能够解释上述，但我恐怕不能。 无论如何，这可能会使人们不必要地为他们的代码添加一堆CSS hack。