Question

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

提前致谢！

Answer 1

您应该检查所选<option>的值，并将<img> src更改为所需图像的路径。为此，您需要在用户更改<select>的{{1}}时调用函数。

以下是一个示例：

HTML

<option>每次选择新onchage="changeImage();时<select>都会调用changeImage()函数。

<option>

的JavaScript

<!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>

您也可以使用<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，这将更容易。

如果服务器上的图像与每个选项的值具有相同的名称，则甚至不需要使用if语句。但是，如果图像位于不同的位置或具有不同的名称/扩展名，则可以设置如下代码：

value

如何根据选择框中选择的不同选项显示不同的图片？

1 个答案:

HTML

的JavaScript