<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。
在我的情况下,我没有一个事件钩子来隐藏select之前的ajax请求触发,所以我不得不强制重新select元素之后的事实。 重新应用现有的宽度似乎工作:
$("select").width($("select").width());
这是一个IE唯一的问题。 首先将select框的CSS显示属性设置为'none',然后通过ajax调用填充它,最后当ajax调用完成并且填充select框时,在select框中删除css显示'none'属性
根据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属性中指定元素的宽度,就会保留元素的宽度。
我正在使用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);
我想你也可以把这个包装成一个指令,如果你有多个区域需要这个解决方法。
我在我的情况有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); },
在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; });
我刚刚通过更改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。