Javascript下拉菜单进入下一个"阶段"

时间:2014-11-09 13:01:18

标签: javascript html drop-down-menu

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

但是,我不确定如何做到这一点,因为我非常新,需要使用javascript。我真的不太了解,但在开始之前,我已经开始尝试并提高我的知识。

但我想用这个下拉菜单做的是当有人在下拉菜单中按下“option1”时,它将导航到下一个“舞台”,它将显示新图片和新的下拉菜单和不同的内容等我想把它放到我的网站上。感谢

修改

选择某个选项后,图像/内容会出现的基础是什么? - 谢谢

1 个答案:

答案 0 :(得分:-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>

编辑:添加了更改图片。