11548 sujets

JavaScript, DOM et API Web HTML5

Formulaire html et JS

Bonjour, Smiley biggrin
Je souhaite faire apparaître une image lorsque l'utilisateur a choisi un titre dans une liste déroulante.

Ma liste déroulante :
<select class='adsmanager_required' name='category_choose' onChange='change("category_choose",1)'>
<option value="-1" selected="selected">Choisissez une rubrique</option><option value="1">Immobilier</option><option value="2">Auto-moto</option><option value="4">Habitat</option><option value="65">Rencontres</option><option value="92">Le mag</option><option value="151">BIO / ECOLOGIE</option><option value="162">AGRICULTURE</option><option value="173">ECHANGE - TROC</option> </select>

Quand l’internaute a choisi Immobilier soit, <option value="1">, une image apparait dans une div placé au dessus du formulaire.

Je pense à une condition en JS mais ne sait pas l'écrire Smiley sweatdrop

Merci pour votre aide Smiley lol
Bonjour je souhaite que tu écrives ton code dans des balises codes...
exemple :

<img id="selectResult"></img>
<select class="adsmanager_required" id="category_choose" name="category_choose" onChange="change('category_choose')">
         <option value="-1" selected="selected">Choisissez une rubrique</option>
         <option value="1">Immobilier</option>
         <option value="2">Auto-moto</option>
         <option value="4">Habitat</option>
         <option value="65">Rencontres</option>
         <option value="92">Le mag</option>
         <option value="151">BIO / ECOLOGIE</option>
         <option value="162">AGRICULTURE</option>
         <option value="173">ECHANGE - TROC</option> 
</select>



 function change(p_selectId)  {
      var select = document.getElementById(p_selectId);
      var valeur = select.options[select.selectedIndex].value;
      
      var img = document.getElementById('selectResult');
      switch(valeur){
               case 1:
                      img.setAttribute('style','background:url("image1.jpg");');
               break;
               //etc..

      }
}

Voila ! je te laisse te débrouiller ça devrait pas être trop dur maintenant.
Merci pour toutes ces infos Su4p, cela m'a beaucoup avancé, mais j'ai quelques petits changements dans la demande :

La liste déroulantes prend affiche son contenu à partir d'une table de la bdd. Je me demande si il est obligé de créer un nouveau champ dans la table pour appelé les images ?? Ou si une fonction php peu être ajouté ??

Merci pour vos réponses
le champ en base c'est plus classe. Après si tu veux vraiment pas de champ tu peux aussi nommer les images du même nom que tes valeurs dans ton select.... exemple
pour <option value="1">Immobilier</option> tu appeleras ton image 1.jpg 


function change(p_selectId)  { 
      var select = document.getElementById(p_selectId); 
      var valeur = select.options[select.selectedIndex].value; 
      var img = document.getElementById('selectResult'); 
       img.setAttribute('style','background:url(valeur+".jpg");'); 
}

PS: A condition que tes images portent toutes la même extension.
Sujet clos
Aller à