0

複数のオプションを含む選択ボックスがあり、選択されているオプションに応じて、各オプションの画像を表示する方法を見つけようとしています。できるだけ早くこれを機能させる必要があるため、ここで大きな助けが必要です。私はそれを自動的に（オプションが選択されたとき）またはボタンで（選択されたオプションに応じて）実現しようとしていますが、これまでのところうまくいくものは思いつきませんでした。どんな助けでも大歓迎です。

前もって感謝します！

4

1 に答える 1

0

選択したの値を確認し、 src を必要な画像のパスに<option>変更する必要があります。<img>これを行うには、ユーザーが を変更したときに関数を呼び出す必要があり<select>ます<option>。

以下にサンプルを示します。

HTML

newが選択されるたびに関数onchage="changeImage();が<select>呼び出されます。changeImage()<option>

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <select id="selectbox" onchange="changeImage();">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JavaScript</option>
    </select>
    <img id="img" src="" />
</body>
</html>

JavaScript

<script type="text/javascript">
    function changeImage(){
        var selectBox = document.getElementById("selectbox");
        var selectedValue = selectBox.options[selectBox.selectedIndex].value;
        document.getElementById("img").src = selectedValue + ".png";
    }
</script>

<option>で選択した値も確認できselectBox.options[selectBox.selectedIndex].innerHTMLます。多くのオプションがあり、すべてを設定したくない場合は、これにより簡単になりvalueます。

サーバー上の画像が各オプションの値と同じ名前である場合は、if ステートメントを使用する必要さえありません。ただし、画像が別の場所にある場合や、名前/拡張子が異なる場合は、次のようにコードを設定できます。

<script type="text/javascript">
    function changeImage(){     
        var selectBox = document.getElementById("selectbox");
        var selectedValue = selectBox.options[selectBox.selectedIndex].value;
        var img = document.getElementById("img");
        if (selectedValue == "html"){
            img.src = "images/html.png";
        } else if (selectedValue == "css"){
            img.src = "images/css.jpeg";
        }
    }
</script>
于 2013-03-28T18:49:04.707 に答える