[Résolu] Affichage de data en jquery selon l'option d'un select choi

Bonsoir à tous,

Tout d'abord voici ce que je veux faire :
J'ai un select qui quand je choisis une option m'affiche une image correspondant a l'option choisi. D'autre part, j'ai voulu aller plus loin en affichant également une légende spécifique a cette image (l'image et la legende sont deux champs différents dans ma base de donnée)

Ceci est fait en javascript via ce code :

<select id="image">
				<option selected="selected">--- Monstres ---</option>

				[code=php]<?php 
				foreach ($infos_monstre as $key => $value)
				{
					echo '<option name='.$key.' value='.$value['img_path'].'>'.$value['monstre_name'].'</option>';
				}
				?>
				</select>

<div class=" left bloc480 margin_top20px">
			<?php 
			$i= 0;
			foreach($infos_monstre as $key => $value) {
			echo '<div style="display:none;" id="all_monstre">';
				echo '<div style="display:none;" id="monstre'.$i.'">';
					echo '<div>'.$value['monstre_info'].'</div>';
				echo '</div>';
			echo '</div>';
				$i++;
			}
			?>
</div>

et le JS :

$(document).ready(function() {
	    $("#image").change(function() {
	        var src = $(this).val();
	        $("#imagePreview").html(src ? "<img src='"+ src + "'>" : "");
	        
	        var name=$("select option:selected").attr("name");
		$("#monstre"+name).show();
	    });
	});

Mais voila après avoir testé pas mal de truc, je n'arrive pas à faire disparaitre le texte qui s'est affiché lorsque je décide de changer d'option, il m'affiche le texte suivant à la suite et donc sans faire disparaitre le précédent.

Étant novice en jquery j'ai encore du mal à connaitre toutes les fonctions.
Modifié par Hooli (05 Jul 2012 - 20:50)