0

我有一个带有多个选项的选择框，我正在尝试找出一种方法来为每个选项显示图片，具体取决于所选择的选项。我在这里非常需要帮助，因为我需要尽快完成这项工作。我试图使其自动发生（选择选项时）或使用按钮（取决于选择的选项），但到目前为止，我无法提出任何可行的东西。非常感谢任何帮助。

提前致谢！

4

1 回答 1

0

您应该检查 selected 的值<option>并将<img>src 更改为所需图像的路径。为此，您需要在用户更改<select>'s时调用一个函数<option>。

这是一个示例：

HTML

每次选择新的时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 回答