0

I have a drop down box that will change an image if a new selection is made. Which i have got to work using the following code

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

The trouble is my form has 3-4 parts so when you click back to edit the form stays selected with the correct option selected but but the image shows the default image, I know this is because it is using an onChange event so I have investigated another way using the following code:

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

Which displays the correct image if I click to go back but it isn't live (onChange) so the user doenst get immediate result showing the new image.

I'm not sure how to combine the two pieces of code above, hope someone can help?

Charles Sprayberry
  • 7,580
  • 2
  • 37
  • 49
  • 1
    I don't know where you're learning your JavaScript, but document.write() shouldn't be used (see: http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice). Also, your code is obtrusive. You should move the onchange event to your separate block of code, as it doesn't belong in the HTML. – Josh Leitzel Aug 20 '09 at 19:50
  • When I was looking to for code/help to implement this, i found a site that was a few years old (2001 ish), i did think the code was obtrusive but am of little knowledge on how to correctly adjust the code. –  Aug 20 '09 at 20:00
  • Is there a way to have this code work for more than one drop down box on the same page, as i have at least 4 options that the user can choose? :) –  Sep 08 '09 at 21:39

1 Answers1

2

Call that same loadCatch function onload:

1) Add an id to the select box so you can reference it elsewhere:

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

2) Call loadCatch from on body load:

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

3) Adjust loadCatch to do nothing if a value hasn't been selected yet:


    function loadCatch(list)
    {
        if (list.selectedValue != -1) {
            var img = list.options[list.selectedIndex].value
            document.thumbnail.src = eval(img + ".src")
        }
    }
Justin Ludwig
  • 2,143
  • 1
  • 16
  • 14
  • If this answer solved your problem, you should click the check mark at "accept" the answer. This grants Justin (and you) rep points and lets other users know this question doesn't need to be answered again – Josh Aug 31 '09 at 16:06
  • Is there a way to have this code work for more than one drop down box on the same page, as i have at least 4 options that the user can choose? :) –  Sep 08 '09 at 21:40