Modifiez la valeur d'un select jQuery

26 juillet 2017 à 17:16:46

Bonjour,

J'ai besoin d'aide sur un script en jQuery.

Voici le code:

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <title>change</title>
</head>

<style>
.bloc-1{
	
}
.bloc-2{
	display:none;
}
.bloc-3{
	display:none;		
}

.bloc-5{
display:none;
}
</style>

<body>
 <select class="voiture">
  <option value="1">Citroen</option> 
  <option value="2" >Peugeot</option>
</select>
<select class="couleur">
  <option value="1">Vert</option> 
  <option value="2" >Noir</option>
  <option value="3">Bleu</option>
</select>

<div class="bloc-1">
<p>Citroen Vert</p>
</div>

<div class="bloc-2">
<p>Citroen Noir</p>
</div>

<div class="bloc-3">
<p>Citroen Bleu</p>
</div>


<div class="bloc-5">
<p>Peugeot Bleu</p>
</div>


</body>
</html>
<script>

$('.voiture').change(function () {
		if(1 == $(this).val()){
			
			$(".bloc-5").hide();
			$(".couleur").prop('disabled', false);
			$('.couleur').css("background-color","white");
			$(".bloc-5").hide();
			$(".bloc-1").show();			
        }
		
		if(2 == $(this).val()){
				
			$(".couleur").prop('disabled', true);
			$('.couleur').css("background-color","lightgrey");
			$(".bloc-5").show();
			$(".bloc-2").hide();
			$(".bloc-3").hide();
			$(".bloc-1").hide();
	
					
        }
	
	});
	
$('.couleur').change(function () {
		if(1 == $(this).val()){
			$(".bloc-1").show();
			$(".bloc-2").hide();
			$(".bloc-3").hide();
			$(".bloc-5").hide();
        }
		if(2 == $(this).val()){
			$(".bloc-2").show();
			$(".bloc-3").hide();
			$(".bloc-1").hide();
			$(".bloc-5").hide();
			
			
        }
		if(3 == $(this).val()){
			$(".bloc-3").show();
			$(".bloc-1").hide();
			$(".bloc-2").hide();
			$(".bloc-5").hide();
        }	
	
	});

</script>

Le souci c'est que au départ si je sélectionne Citroën - Noir ça m'affiche bien le message suivant : Citroën Noir .

Mais après si je change par Peugeot le message est bien Peugeot Bleu (message imposé) mais le deuxième sélecteur ne se modifie pas en Bleu .

Merci de votre aide.

lechtidu56

26 juillet 2017 à 17:43:48

Salut,

Il te suffit de forcer la couleur sélectionnée.

$('.couleur option[value="3"]').attr('selected', true);

d0126

26 juillet 2017 à 22:46:29

Oui merci mais le code ne fonctionne que une seule fois puis après ça devient comme avant.

-Au début si je click sur Peugeotle deuxième sélecteur devient bleu (grisé) et m’affiche le message Peugeot Bleu . Ce qui est correct.

-Si je reviens sur Citroën et je change le deuxième sélecteur en vert ça m’affiche le message Citroen Vert. Ce qui est correct.

-Et la quand je reviens sur Peugeot ça m’affiche bien le message Peugeot Bleu mais le sélecteur est resté sur le vert (grisé).

Est-ce que j’ai placé au mauvais endroit la ligne ?

Voici le code :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <title>change</title>
</head>

<style>
.bloc-1{
	
}
.bloc-2{
	display:none;
}
.bloc-3{
	display:none;		
}

.bloc-5{
display:none;
}
</style>

<body>
 <select class="voiture">
  <option value="1">Citroen</option> 
  <option value="2" >Peugeot</option>
</select>
<select class="couleur">
  <option value="1">Vert</option> 
  <option value="2" >Noir</option>
  <option value="3">Bleu</option>
</select>

<div class="bloc-1">
<p>Citroen Vert</p>
</div>

<div class="bloc-2">
<p>Citroen Noir</p>
</div>

<div class="bloc-3">
<p>Citroen Bleu</p>
</div>


<div class="bloc-5">
<p>Peugeot Bleu</p>
</div>


</body>
</html>
<script>

$('.voiture').change(function () {
		if(1 == $(this).val()){
			
			$(".bloc-5").hide();
			$(".couleur").prop('disabled', false);
			$('.couleur').css("background-color","white");
			$(".bloc-5").hide();
			$(".bloc-1").show();			
        }
		
		if(2 == $(this).val()){
				
			$(".couleur").prop('disabled', true);
			$('.couleur').css("background-color","lightgrey");
			$(".bloc-5").show();
			$(".bloc-2").hide();
			$(".bloc-3").hide();
			$(".bloc-1").hide();
			$('.couleur option[value="3"]').attr('selected', true);
					
        }
	
	});
	
$('.couleur').change(function () {
		if(1 == $(this).val()){
			$(".bloc-1").show();
			$(".bloc-2").hide();
			$(".bloc-3").hide();
			$(".bloc-5").hide();
        }
		if(2 == $(this).val()){
			$(".bloc-2").show();
			$(".bloc-3").hide();
			$(".bloc-1").hide();
			$(".bloc-5").hide();
			
			
        }
		if(3 == $(this).val()){
			$(".bloc-3").show();
			$(".bloc-1").hide();
			$(".bloc-2").hide();
			$(".bloc-5").hide();
        }	
	
	});

</script>

lechtidu56

26 juillet 2017 à 23:15:40

Je t'aurais bien dit de rajouter un

$('.couleur option[value="3"]').attr('selected', false);

Dans ton premier if (si on choisit Citroën), mais tu seras automatiquement redirigé vers ton premier select.

Je vois pas vraiment.. J'y réfléchi et reviens vers toi le cas échéant.

-
Edité par lechtidu56 26 juillet 2017 à 23:16:07