Javascript下拉菜单移至下一个"stage"



我看到了关于如何制作"下拉"菜单的多个问题,有点像这样(这是我想要得到的外观):http://gyazo.com/1b024b83070785c9e4b6e0ee07f683c4

然而,我真的不确定如何做到这一点,因为我是一个非常新的人,需要使用javascript来做一些事情。我真的知道的不多,但在开始之前,我会观察一些事情,试图提高我的知识。

但我想用这个下拉菜单做的是,当有人按下下拉菜单中的"选项1"时,它将导航到下一个"阶段",它将显示新的图片、新的下拉菜单和不同的内容等。我正试图将其输入我的网站。感谢

编辑

一旦选择了某个选项,让图像/内容出现的基础是什么?-感谢

所以您只想在更改选项时进行选择?

<html>
    <body>
        <select onchange="doStuff();" id="mySelect">
            <option value="1">One</option>
            <option value="2">Two</option>
        </select>
        <img src="" id="myImage"/>
        <script>
            var imageUrl1 = "http://i1.kym-cdn.com/entries/icons/original/000/007/447/hello-yes-this-is-dog.png",
                imageUrl2 = "http://img1.wikia.nocookie.net/__cb20071017205425/uncyclopedia/images/d/d5/Pedobear.png",
                mySelect = document.getElementById("mySelect"),
                myImage = document.getElementById("myImage"),
                currentSelection,
                doStuff = function () {
                    currentSelection = mySelect.options[mySelect.selectedIndex].value;
                    if (currentSelection == 1) {
                        myImage.src = imageUrl1;
                    } else if (currentSelection == 2) {
                        myImage.src = imageUrl2;
                    }
                };
        </script>
    </body>
</html>

编辑:添加了更改图像。

最新更新