changement d'image basée sur l'option de menu déroulant

Question

Possible en double:
jQuery onchange/onfocus select box to display an image?

Vous cherchez à être en mesure de changer une image dynamique en fonction de la liste déroulante des options de sélection avec un identifiant de « principal "

Je suis tombé sur ce code qui trouve le texte pas la valeur de sélection, ce qui est exactement ce que je veux. J'ai juste besoin de me connecter à l'image.

alert('Text is: ' + $('#attribute119 :selected').text()); 

L'image est formaté comme cette

<img src="mainimage.jpg" id="main"> 

Comment puis-je modifier dynamiquement l'image en fonction du nom de l'option sélectionnée lorsque le formulaire change? Ma forme ressemble à ceci.

<form name="pds"> 
<select name="DropDownName" id="attribute119" > 
<option value="0">Choose an option...</option> 
<option value="2">blue</option> 
<option value="3">green</option> 
<option value="4">red</option> 
</select> 
</form> 

Les images seront nommées comme ceci.

"1232_blue.jpg, 1232_red.jpg,etc.". 

Le nom de la couleur est suivi par le dernier « _ » dans le nom du fichier

Answer 1

Cela devrait le faire:

$('#attribute119').change(function() { 
    $('#main').attr('src', '1232_' + $('#attribute119 :selected').text() + '.jpg'); 
});