Bonjour,

Je vous explique mon soucis que je n'arrive pas à résoudre. En gros, j'ai 2 champs de type <select></select> et plusieurs <div></div> que je veux afficher selon les choix effectués sur les 2 select.

Le premier, qui est un modèle de produit (admettons un type de briquet => Pierre, Jetable etc ..)

Le second, qui est la couleur de ce produit (Bleu, Rouge, Vert etc ...)

Le but de mon script est qu'en fonction du choix de ces 2 select, le bon produit s'affiche (si je choisi le briquet pierre et la couleur rouge, je veux que l'image de mon briquet pierre de couleur rouge s'affiche, etc ...).

Pour ce faire, j'utilise la fonction change de jquery, ça fonctionne pour le modèle du produit, OU pour la couleur du produit, mais séparément. Je n'arrive pas à combiner les 2. Je sélectionne mon type de briquet dans mon formulaire, le bon produit s'affiche. Mais lorsque je veux sélectionner la couleur, ça ne fonctionne pas. Quand j'imbrique ma fonction change du champ select de la couleur dans le change du champ select du modèle, il n'y a pas d’interaction.

Je met le code, ça sera peut-être plus parlant:

La partie HTML:

<form enctype="multipart/form-data" method="post" action="mail.php">

<!-- Choix du modèle -->						
	<p><label for="modele">* Modèle: </label></p>
	<select class="select-modele" name="modele">
		<option value="" selected>- Choisir -</option>
		<option value="pierre">Pierre (jetable)</option>
		<option value="electronique">Electronique (rechargeable)</option>
	</select>

<!-- Choix de la couleur -->	
	<p><label for="couleur">* Couleur: </label></p>
	<select class="select-couleur" name="couleur">
		<option value="" selected>- Choisir -</option>
		<option value="Blanc">Blanc</option>
		<option value="Noir">Noir</option>
		<option value="Rouge">Rouge</option>
		<option value="Bleu">Bleu</option>
		<option value="Jaune">Jaune</option>
		<option value="Vert">Vert</option>
		<option value="Orange">Orange</option>
	</select>

	<!-- Affichage des div -->
		<!-- Briquets pierre -->
		<div id="pierreBlanc1"><img src="img/pierre_white_V.png" alt="pierre Blanc" height="360" width="130"></div>
		<div id="pierreBlanc2"><img src="img/pierre_white_H.png" alt="pierre Blanc" height="130" width="360"></div>
		<div id="pierreNoir1"><img src="img/pierre_black_V.png" alt="pierre Noir" height="360" width="130"></div>
		<div id="pierreNoir2"><img src="img/pierre_black_H.png" alt="pierre Noir" height="130" width="360"></div>

		<!-- Briquets electronique -->
		<div id="electroniqueBleu1"><img src="img/electronique_blue_V.png" alt="electronique Bleu" height="360" width="130"></div>
		<div id="electroniqueBleu2"><img src="img/electronique_blue_H.png" alt="electronique Bleu" height="130" width="360"></div>
		<div id="electroniqueJaune1"><img src="img/electronique_yellow_V.png" alt="electronique Jaune" height="360" width="130"></div>
		<div id="electroniqueJaune2"><img src="img/electronique_yellow_H.png" alt="electronique Jaune" height="130" width="360"></div>
		<div id="electroniqueVert1"><img src="img/electronique_green_V.png" alt="electronique Vert" height="360" width="130"></div>
		<div id="electroniqueVert2"><img src="img/electronique_green_H.png" alt="electronique Vert" height="130" width="360"></div>
		<div id="electroniqueOrange1"><img src="img/electronique_orange_V.png" alt="electronique Orange" height="360" width="130"></div>
		<div id="electroniqueOrange2"><img src="img/electronique_orange_H.png" alt="electronique Orange" height="130" width="360"></div>
</form>

La partie Jquery:

$(document).ready(function(){
	/*************************/
	/* Affichage de l'aperçu */
	/*************************/
	
	$('select[name="modele"]').change(function(){
		
		var valModele = $(this).val();
		
		if( valModele == 'pierre' ){
			$('select[name="couleur"]').change(function(){
				var valCouleur = $(this).val();
				
				if( valCouleur == 'Blanc' ){
					$('#pierreBlanc1').show();
					$('#pierreBlanc2').show();
				}
			});
		}
		else if( valModele == 'electronique' ){
			$('select[name="couleur"]').change(function(){
				var valCouleur = $(this).val();
				
				if( valCouleur == 'Blanc' ){
					$('#electroniqueBlanc1').show();
					$('#electroniqueBlanc2').show();
				}
			});
		}
	});
});

J'ai allégé volontairement le code du script JS pour éviter de surcharger la page ...

Si quelqu'un a un piste, je suis preneur. Si quelqu'un a la solution, c'est encore mieux.

Merci d'avance à tous.

-
Edité par Romjé 2 janvier 2018 à 10:06:46