下拉菜单根据选择显示不正确的图像答案

【问题标题】：Drop down menu showing improper images based on selection下拉菜单根据选择显示不正确的图像
【发布时间】：2010-11-21 10:59:57
【问题描述】：

我有一个下拉框，如果做出新的选择，它会更改图像。我必须使用以下代码来工作

<HTML>
    <HEAD>
        <TITLE>JS1</TITLE>
        <script LANGUAGE="JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
        <!--
          image1 = new image(120,90)
          image1.src = "desk1.gif"
          image2 = new image(120,90)
          image2.src = "desk2.gif"
          image3 = new image(120,90)
          image3.src = "desk3.gif"
          image4 = new image(120,90)
          image4.src = "desk4.gif"

          function loadCatch(list)
          {
            var img = list.options[list.selectedIndex].value
            document.thumbnail.src = eval(img + ".src")
          }
       </SCRIPT>
    </HEAD>
    <BODY> 
        <IMG SRC="desk1.gif" NAME="thumbnail" HEIGHT="90" WIDTH="120">
        <FORM>
            <SELECT NAME="catch" onChange="loadCatch(this)">
            <OPTION VALUE="Image1">Bands
            <OPTION VALUE="Image2">Clips
            <OPTION VALUE="Image3">Lamp
            <OPTION VALUE="Image4">Else
           </SELECT>
       </FORM>
    </BODY>
</HTML>

问题是我的表单有 3-4 个部分，所以当您单击返回编辑表单时，会保持选中状态并选择正确的选项，但图像显示的是默认图像，我知道这是因为它使用了 onChange 事件所以我使用以下代码研究了另一种方法：

<script language="JavaScript" type="text/javascript"> 
<!--
var dropdownIndex = document.getElementById('colorsselect').selectedIndex;
var dropdownValue = document.getElementById('colorsselect')[dropdownIndex].value;
document.write(dropdownValue);
//-->
</script>

如果我点击返回，它会显示正确的图像，但它不是实时的 (onChange)，因此用户不会立即获得显示新图像的结果。

我不知道如何结合上面的两段代码，希望有人能帮忙？

【问题讨论】：

我不知道您在哪里学习 JavaScript，但不应使用 document.write()（请参阅：stackoverflow.com/questions/802854/…）。此外，您的代码很突兀。您应该将 onchange 事件移到单独的代码块中，因为它不属于 HTML。
当我在寻找代码/帮助来实现这个时，我发现了一个几年前的网站（2001 年左右），我确实认为代码很突兀，但我对如何实现知之甚少正确调整代码。
有没有办法让这段代码在同一页面上的多个下拉框中工作，因为我至少有 4 个用户可以选择的选项？ :)

标签： javascript image drop-down-menu

【解决方案1】：

调用同样的loadCatch函数onload：

1) 在选择框中添加一个 id，以便您可以在其他地方引用它：

&lt;select id="catch" name="catch" onchange="loadCatch(this)"&gt;

2) 从身体负荷呼叫loadCatch：

&lt;body onload="loadCatch(document.getElementById('catch'))"&gt;

3) 调整 loadCatch 以在尚未选择值时不执行任何操作：


    function loadCatch(list)
    {
        if (list.selectedValue != -1) {
            var img = list.options[list.selectedIndex].value
            document.thumbnail.src = eval(img + ".src")
        }
    }

【讨论】：

如果这个答案解决了你的问题，你应该点击“接受”答案的复选标记。这会授予贾斯汀（和您）代表点数，并让其他用户知道这个问题不需要再次回答
有没有办法让这段代码在同一页面上的多个下拉框中工作，因为我至少有 4 个用户可以选择的选项？ :)