Getting <option> id instead of value

JavaScript
1

I’m trying to pass the ID option attribute to the function swapImage() instead of passing the VALUE attribute.

The code below works fine but I want value to be equal to an ID, not the image URL. I tried changing dropd.value to dropd.id within the function but that gave me an error.

Is it possible to pass the option ID attribute to the function and if so, how? I’m open to using rel=“” insteal of id=“” if necessary.

Thanks
Eric


function swapImage(){
	var image = document.getElementById("imageToSwap");
	var dropd = document.getElementById("dd");
	image.src = dropd.value;	
};


<img id="imageToSwap" src="animal-150x150.jpg">

<select id="dd" onchange="swapImage()">
	<option value="1" id="boats-1-150x150.jpg">Image Name</option>
	<option value="2" id="boats-fog-150x150.jpg">Image Name</option>
</select>
2

If I understand you correctly, you want to obtain the id of the currently selected option in the “dropd” selection box - right? That can be achieved like so:


image.src = dropd.options[dropd.selectedIndex].id;

Good luck!

3

I didn’t think that it was valid for options to have id attributes.

Why are you using 1 and 2 for the value when the filename would be a perfect candidate for the value attribute instead?

4

Paul,
yeah, options can haz id’s.

I wonder if numbers are used for values because they’re way shorter than the long img filenames? I’m lazy myself and hate typing long anythings (so, I wouldn’t have even used such long names for the id’s either).

5

Thanks! That worked. :slight_smile:

Because I’m tying this in with the way wordpress stores their images and they identify their images with ID’s in the database.