how to change picture using drop down list?

Question

I want to use a drop down list, every time i click the content in it, different pictures will show up. But i don't want to use the property 'value', because i want to use the values for other use.

Example:

<select name='test'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>

How do i accomplish that?

Thanks.

Edit:

with pointy's suggestion, it works.

<select name="dpt" onChange="picture.src=this.options[this.selectedIndex].getAttribute('data-whichPicture');" >
<option value="1839" data-whichPicture='./imgs/t1.jpg' >01</option>
<option value="1661" data-whichPicture='./imgs/t2.png' >02</option>
</select>
</select>
<img src='' id='picture' />

Edit:

There is a problem, that is if i refresh the page, the default the picture will display but the selection in the drop down list will stay. How to fix that?

Answer 1

You could use the "class" of each option to hold some indicator of what image to show. If you're writing in HTML5 like all of the Beautiful People nowadays, you can use a "data" attribute:

<option value='1' data-whichPicture='http://whatever.com/picture_017.jpg'>1</option>

You can in fact stick any attribute you want on your tags, but it'll leave the page in a non-valid state. The HTML5 attributes aren't validated yet (I don't think; the HTML5 validator I last tried was pretty dodgy), but the W3C promises that they will be someday.

edit — also - your question mentions that you want to change pictures when somebody "clicks" on the <select> . You can in fact get "click" events from each <option> , but you should probably also watch for "change" events. Users can tab into your <select> and use up- and down-arrow keys to change selection. You won't get the "change" event until the user tabs out of the <select> or clicks somewhere else. (It might be possible to get "keypress" events; I haven't tried that but I just might ...)

edit — To get the attributes (if you use the "data-" trick), you have to use the "getAttribute" method on the elements:

var whichPicture = sel.options[sel.selectedIndex].getAttribute('data-whichPicture');

Answer 2

You can set up a map between the option values and the images

{ 1: "imgA.png", 2: "imgB.png" }

and then use a function to load the correct image based on this mapping.

Another approach might be to augment the value with the image name, like this,

<select name='test'>
<option value='1;imgA.png'>1</option>
<option value='2;imgB.png'>2</option>
</select>

And then use string functions to parse out the number value or the image name as required.

Answer 3

You can put multiple values in the 'value' field by separating them with delimiters. You would have to split the value and select the one you want to use when displaying your image

<option value="1,dogs.jpg">1</option>
<option value="2,hogs.jpg">2</option>
<option value="3,cats.jpg">3</option>
<option value="4,dogs.jpg">4</option>