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');