Databases
StackOverflow2013
Postsdbo
PODrop down menu showing improper images based on selection
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODrop down menu showing improper images based on selection
    primarykey
    data
    text
    <p>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</p> <pre><code>&lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;JS1&lt;/TITLE&gt; &lt;script LANGUAGE="JAVASCRIPT TYPE="TEXT/JAVASCRIPT"&gt; &lt;!-- 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") } &lt;/SCRIPT&gt; &lt;/HEAD&gt; &lt;BODY&gt; &lt;IMG SRC="desk1.gif" NAME="thumbnail" HEIGHT="90" WIDTH="120"&gt; &lt;FORM&gt; &lt;SELECT NAME="catch" onChange="loadCatch(this)"&gt; &lt;OPTION VALUE="Image1"&gt;Bands &lt;OPTION VALUE="Image2"&gt;Clips &lt;OPTION VALUE="Image3"&gt;Lamp &lt;OPTION VALUE="Image4"&gt;Else &lt;/SELECT&gt; &lt;/FORM&gt; &lt;/BODY&gt; &lt;/HTML&gt; </code></pre> <p>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:</p> <pre><code>&lt;script language="JavaScript" type="text/javascript"&gt; &lt;!-- var dropdownIndex = document.getElementById('colorsselect').selectedIndex; var dropdownValue = document.getElementById('colorsselect')[dropdownIndex].value; document.write(dropdownValue); //--&gt; &lt;/script&gt; </code></pre> <p>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.</p> <p>I'm not sure how to combine the two pieces of code above, hope someone can help?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCharles Sprayberry
    1. This table or related slice is empty.
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COI 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.
      singulars
      1. PODrop down menu showing improper images based on selection
      1. USJosh Leitzel
    2. COWhen 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.
      singulars
      1. PODrop down menu showing improper images based on selection
      1. This table or related slice is empty.
    3. COIs 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? :)
      singulars
      1. PODrop down menu showing improper images based on selection
      1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload