<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開溜!!!它在我簡化的例子中工作正常，所以問題在其他地方。抱歉。原始代碼需要很長時間並且很複雜才能粘貼到這裏，但是當我找到答案時會通知您。

一段時間後....

OK，我得到了這個問題降低到$（選擇）。每個（）循環中調用Ajax。循環遍歷所有選擇框並異步填充選項。如果我使它成爲同步調用，選擇框具有正確的寬度並正確顯示，但如果它是異步調用，則選擇框僅顯示圖像中的第一個字符。仍在努力，將再次回到你身邊。

我仍然想知道什麼會導致選擇框顯示不正確。我可以做出解決方法並使其正確顯示，但這並不能回答問題。這只是一個選項，它應該總是工作，對不對？

經過一個週末忽略問題....

對我找到了解決方法。在進行ajax調用來填充選擇框之前，我首先將css顯示屬性設置爲'none'，然後填充它，最後在ajax調用和填充完成時，只刪除css顯示'none'屬性。

所以我仍然不知道爲什麼IE不喜歡我，但我們至少有一個解決方案。

Answer 1

這是一個IE唯一的問題。首先將選擇框上的css顯示屬性設置爲'none'，然後通過ajax調用填充它，最後當ajax調用完成並且填充選擇框時，在選擇框中刪除css顯示'none'屬性

Answer 2

在我的情況下，我沒有一個事件鉤子來隱藏select在ajax請求觸發前，所以我不得不在事後強制重新繪製select元素。重新應用現有寬度似乎工作：

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

Answer 3

我有回調在我的情況下，被填充同時顯示，以便設置爲none不是我的選擇，但是，我能闡述@Daniel Brinks回答解決我的問題..一旦添加任何項目，並顯示從無更改爲無，所有未來添加的項目將罰款..使用jQuery和小部件..所以，如果你正試圖解決你的問題小工具在IE中工作，這可能對你有用。

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

在窗口小部件的_init功能

：

在窗口小部件的_create功能

buildAvailableItem - 增加了選擇

然後添加到用於跟蹤的陣列部件狀態

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 

我通常使用函數n稱爲addAvailableItem，用於處理構建項目並將其添加到列表中，但這也會觸發事件，並且我不希望爲「加載...」項目觸發事件。

如果由於某種原因，有人是用一個非常緩慢的瀏覽器，他們將看到「正在加載...」它刪除，並添加了Ajax項目前..

如果有人想更復制和粘貼友好的版本讓我知道，

以供參考的是建立項目：

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

Answer 4

基於吉姆的回答，我通過下拉列表這個方法：

// 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中的bug，並且在調用方法之前保留元素的寬度只要寬度在CSS中指定，而不是在style屬性中指定。

Answer 5

我正在使用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 6

我剛剛通過更改select元素被初始化（在jQuery小部件中動態創建）來解決同樣的問題。

實施例A

這不起作用：

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

這確實：

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

實施例B

同樣，以下不WOR K：

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

鑑於此意願：

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

結論

我很想能夠解釋上述但我恐怕不能。無論如何，這可能會讓人們不必要地爲他們的代碼添加一堆CSS hack。

Answer 7

在angular.js的selectDirective的render函數中添加幾行以下位置（用粗體標記爲**）對我來說工作得很好。我正在查看是否有其他可能的解決方案，而不是修補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的標籤屬性是不一樣的文本屬性。

這可以通過在屏幕加載後添加以下代碼並查看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; 
});