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或其他一些库进行事件处理......

试试这个.... 给selectbox一个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>

在IE中的onChange函数之后，图像不显示

1 个答案: