how to change picture using drop down list ?

Question

Hello,

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

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>