javascript - 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 事件，直到您单击按钮、制表符或单击屏幕上的某个位置...我更喜欢您使用 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>