Question

我有一个下拉框，如果进行了新的选择，它将改变图像。我必须使用以下代码工作

<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），那么显示正确的图像，这样用户就可以立即获得显示新图像的结果。

我不确定如何将上面两段代码结合起来，希望有人可以提供帮助？

Answer 1

调用相同的loadCatch函数onload：

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

<select id="catch" name="catch" onchange="loadCatch(this)">

2）从身体负荷呼叫loadCatch：

<body onload="loadCatch(document.getElementById('catch'))">

3）如果尚未选择值，则调整loadCatch不执行任何操作：


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

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

1 个答案: