IE中的onChange函數后圖像未顯示

Question

基本上，我做了一個功能，可以根據用戶從下拉菜單中選擇的選項來選擇要顯示的特定圖像，該功能在Chrome和Firefox上非常有用！ 但不幸的是不是IE。 我不知道為什么，也不會感謝任何人在此問題上的智慧。

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>

Answer 1

IE僅在元素失去焦點時才觸發onchange事件，直到您單擊按鈕，跳出或單擊屏幕上的某個位置時才觸發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>