Coding for a double drop down image selector

[NIWC]

I have been searching the internet for a double drop down which displays an image underneath but to no prevail.

Thanks to Javascript.com I have found a cut and paste code for a single drop down menu which will display/change an image. This I can implement fine but it would be great if I could include two drop down menus allowing neat organisation of topics by parent and child themes.

Does anyone know of a simple to implement double drop down menu which will display an image underneath or in addition is anyone able to tweak the code at http://www.javascriptkit.com/script/cut173.shtml to include a second drop down.

Thank you all for reading.

[Will Bontrager]

Originally Posted by NIWC

I have been searching the internet for a double drop down which displays an image underneath but to no prevail.

Thanks to Javascript.com I have found a cut and paste code for a single drop down menu which will display/change an image. This I can implement fine but it would be great if I could include two drop down menus allowing neat organisation of topics by parent and child themes.

Does anyone know of a simple to implement double drop down menu which will display an image underneath or in addition is anyone able to tweak the code at http://www.javascriptkit.com/script/cut173.shtml to include a second drop down.

Thank you all for reading.

This may do it for you:

<select onchange="document.getElementById('dropimage1').src = this.options[this.selectedIndex].value">
<option value="http://www.willmaster.com/images/wmlogo_icon.gif">Willmaster Logo</option>
<option value="http://www.willmaster.com/08images/wslogo150x156.jpg">WebSite's Secret logo</option>
<option value="http://www.willmaster.com/software/productimages/shortURLv2.jpg">Short URL software logo</option>
<option value="http://www.willmaster.com/software/db-backup-restore/images/DB-backup-restore.jpg">Database Back Up and Restore logo</option>
</select>
<p>
<img id="dropimage1" src="http://www.willmaster.com/images/wmlogo_icon.gif" alt="place for image">
</p>


<select onchange="document.getElementById('dropimage2').src = this.options[this.selectedIndex].value">
<option value="http://www.willmaster.com/images/wmlogo_icon.gif">Willmaster Logo</option>
<option value="http://www.willmaster.com/08images/wslogo150x156.jpg">WebSite's Secret logo</option>
<option value="http://www.willmaster.com/software/productimages/shortURLv2.jpg">Short URL software logo</option>
<option value="http://www.willmaster.com/software/db-backup-restore/images/DB-backup-restore.jpg">Database Back Up and Restore logo</option>
</select>
<p>
<img id="dropimage2" src="http://www.willmaster.com/images/wmlogo_icon.gif" alt="place for image">
</p>

Note the id values in this color.

Each select field's onchange attribute specifies the id value of the corresponding image tag. This method will allow you to insert as many dropdown/image sets as you please. Just ensure each image tag has a unique id value.

The example images are my own so the code can be copied and tested without first finding images to test with.

Will

[NIWC]

Originally Posted by Will Bontrager

This may do it for you:

<select onchange="document.getElementById('dropimage1').src = this.options[this.selectedIndex].value">
<option value="http://www.willmaster.com/images/wmlogo_icon.gif">Willmaster Logo</option>
<option value="http://www.willmaster.com/08images/wslogo150x156.jpg">WebSite's Secret logo</option>
<option value="http://www.willmaster.com/software/productimages/shortURLv2.jpg">Short URL software logo</option>
<option value="http://www.willmaster.com/software/db-backup-restore/images/DB-backup-restore.jpg">Database Back Up and Restore logo</option>
</select>
<p>
<img id="dropimage1" src="http://www.willmaster.com/images/wmlogo_icon.gif" alt="place for image">
</p>


<select onchange="document.getElementById('dropimage2').src = this.options[this.selectedIndex].value">
<option value="http://www.willmaster.com/images/wmlogo_icon.gif">Willmaster Logo</option>
<option value="http://www.willmaster.com/08images/wslogo150x156.jpg">WebSite's Secret logo</option>
<option value="http://www.willmaster.com/software/productimages/shortURLv2.jpg">Short URL software logo</option>
<option value="http://www.willmaster.com/software/db-backup-restore/images/DB-backup-restore.jpg">Database Back Up and Restore logo</option>
</select>
<p>
<img id="dropimage2" src="http://www.willmaster.com/images/wmlogo_icon.gif" alt="place for image">
</p>

Note the id values in this color.

Each select field's onchange attribute specifies the id value of the corresponding image tag. This method will allow you to insert as many dropdown/image sets as you please. Just ensure each image tag has a unique id value.

The example images are my own so the code can be copied and tested without first finding images to test with.

Will

Hi Will,

Many thanks for your help with this. Your code works great and is very simple to implement, again thank you for sharing.

Whilst this improves upon what I had and provides a great solution, its not quite what I was looking for. If possible what I would like to do is include two drop downs where one filters the options to another and upon selection of both drop downs displays an image underneath.

For example the first drop down could include five options, options 1-5 and drop down two would include filtered options based upon the selection of drop down one. So from drop down menu one the user could select 'option 1' and drop down menu two could include an array of options, lets say options A-C (where options A-C are the images that will render below the drop downs. If the user selected 'Option 2' from the first drop down they could be presented with options D-F within drop down two and so on. Hope that makes sense!

If you are able to help further with this that would be great, if not thank you very much for your suggestion. I don't have a great knowledge on this subject so any additional information will be greatly received.

[sunfighter]

You wish to make a second drop down dynamic based on the select of the first.
See this http://css-tricks.com/dynamic-dropdowns/

Trying to place an image behind it is not easy. I have seen it done behind the option and the select so maybe slicing an image and using that would work. Here is the css:

select 
{
background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0;
padding:4px;
line-height: 21px;
border: 1px solid #fff;
}
option
{
background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0;
padding:4px;
line-height: 21px;
border: 1px solid #fff;
}

See what you can do with it.

Maybe this:

#a, #b
{
background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0;
padding:4px;
line-height: 21px;
border: 1px solid #fff;
}
    </style>
  </head>
  <body>
    <select>
      <option id="a">Foo</option>
      <option>Bar</option>
      <option id="b">Something longer</option>
  </body>
</html>