IE中的onChange功能後不顯示圖像

基本上，我已經做了一個功能，選擇一個特定的圖像來顯示，取決於用戶從下拉菜單中選擇哪個選項，這對Chrome和Firefox非常有用！但不幸的是不是IE。我不知道爲什麼，並會在此事上感謝任何人的智慧。IE中的onChange功能後不顯示圖像

CSS：

#texture img { 
     width: 395px; 
     height: 288px; 
     border: 1px solid #3d3d3d; 
    }

的JavaScript：

function newTexture() { 
      var textureName = '<img src="'+document.worktopForm.worktopColour.value+'.jpg">'; 
      document.getElementById("texture").innerHTML = textureName;  
    }

HTML：

<form name="worktopForm"> 
    <select name="worktopColour" onChange="newTexture();"> 
     <option value="none" selected></option> 
     <option value="starGalaxy">Star Galaxy(Band One)</option> 
     <option value="seravalle">Seravalle(Band Two)</option> 
     <option value="balmoralFineGrain">Balmoral Fine Grain(Band Three)</option> 
     <option value="nutYellow">Nut Yellow(Band Four)</option> 
     </select> 

    <div id="texture"></div> 
</form>

來源

2012-10-03 Luke Turnbull

添加的jsfiddle，也許我們可以幫助：） –

在IE上使用JSFiddle會有什麼不同，在Chrome或Firefox上使用它？這並不是說它不能正常工作，因爲一些奇怪的原因，這些圖像並沒有在IE上顯示出來！ –

http://jsfiddle.net/lukedt/Rg4Xa/ –

IE只有當元素失去焦點將觸發onchange事件，這是不是直到你點擊按鈕，標籤出或點擊屏幕上的某個地方... 我更喜歡你使用jquery或者其他一些呃庫事件處理...

試試這個.... 給選擇框的ID ......說「worktopColour」 ......

<script type="text/javascript"> 
$(function(){ 
$("#worktopColour").bind(($.browser.msie ? "click" : "change"), function() { 
    var textureName = '<img src="'+document.worktopForm.worktopColour.value+'.jpg">'; 
     document.getElementById("texture").innerHTML = textureName; 
}); 
}); 
</script>

來源

2012-10-03 13:36:48 bipen

請確保你加載jquery.js .... :) – bipen

我已經去了各種其他onChange事件，火災的功能，在這種形式工作的IE瀏覽器工作正常，圖像出現在Chrome上的Firefox。所以我有一種感覺，這與IE不喜歡的函數，HTML或CSS有關。雖然我不確定.. –

IE中的onChange功能後不顯示圖像

回答

相關問題