Question

Basically, I have made a function that selects a certain image to display depending on which option the user selects from the drop down menu which works great on Chrome and Firefox! But unfortunately not IE. I have no idea why and would appreciate anyone’s wisdom on this matter.

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 only fires the onchange event when the element loses focus, which isn’t until you click the button, tab out or click somewhere on the screen…
i prefer u to use jquery or some other library for event handling…

try this ….
give selectbox an id….say “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>