getElementById et onChange

WRInaute passionné
Salut à tous,

J'essaie de faire apparaitre une image sur le onChange d'un select mais j'ai un souci, voici mon code :

Code:
<script type="text/javascript">
function update_pet_caption() {
pet_caption = document.getElementById('caption').value;
document.getElementById('pet_image').src = "images/" + pet_caption + ".jpg";
}
window.onload = update_pet_caption;
</script>

<img id="pet_image" src="">
<select name='caption' id="caption" onChange='update_pet_caption()'>
<option value="B-R" id="blanc-rose">Blanc Rose</option>
<option value="R-S" id="rouge-sang">Rouge Sang</option>
<option value="V-P" id="vert-pale">Vert Pale</option>
</select>

Je voudrais que mes "value" soient différentes de mes "id" dans mon select et que ce soit l'id qui soit récupéré dans la fonction javascript afin d'afficher le bon fichier image, exemple :

L'url de mon image pour la « value="B-R" » est « images/blanc-rose.jpg » et non pas « images/B-R.jpg », comment faire cela dans ma fonction javascript ?

Merci pour votre aide.
 
WRInaute passionné
Merci Zeb mais n'y a-t-il pas une possibilité d'avoir une value et un id différents et que ça marche ?

Mes images sont déjà utilisées ailleurs avec ce nom et même chose pour les value du select !
 
WRInaute accro
fait un tableau ou tu met les noms de fichier et transforme ta value du select en un indice du tableau. Tu aura ainsi une correspondance entre le select et le nom de fichier.
 
WRInaute impliqué
peut-être :
var e = document.getElementById("caption");
var id = e.options[e.selectedIndex].id;
 
Discussions similaires
Haut