Form list which shows picture corresponding to active "option"

I am looking to build a drop down menu showing around 90 items. These items will be the names of cities. This is very easy to accomplish;


However, I am looking for a way to have a picture showing next to the list, corresponding to the selected option. I can not find any tutorial on this.

Any tips to get me started? Can this be accomplished using HTML/CSS only, or will there be a need for some PHP? Your help is appreciated, thanks!

Not sure what you mean.

IN the list of options, a picture of each city?

A picture of a city appears next to the select button after someone has selected a city?

If you mean the latter, you will likely need Javascript, because a form naturally does not respond to use choices until after they hit “submit”. However I seem to recall a setup someone did where an image was associated with options and they made one image appear in a particular part of the screen as the user hovered over each option… something like what meyer has here:

However form controls are more browser-controlled than regular page elements. I’m not sure how well a technique like that would work cross-browser.

Hey Stomme Poes,

Thanks for your feedback! No, I don’t mean inside the list itself, it is the second option that I am looking for.

The example is not really what I was looking for though. I can understand the need for Javascript in this case. Is PHP not possible either? Or might there be a way to create a drop-down menu without the “form” controls?

You could style a regular dropdown list as a <select> dropdown, however regularly, with <select> and <option>'s it would not be possible since styling them isn’t really easy (nor was it meant to be styled)
Here is an exmample of a dropdown, based off [url=]this article. :slight_smile: