0

基本的に、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>
4

1 に答える 1

0

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>
于 2012-10-03T13:36:48.467 に答える