Remplir un select par un autre select

**kinkon** · 22/09/2016, 17h25

Bonjour la communauté,
Voilà j'ai deux liste de choix qui sont remplis à partir des requêtes MySQL et ce que je veux faire doit être simple pour ceux qui s'y connaissent bien en jquery et ajax.

Voici le code de mon premier select et du deuxième :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php
	// Connexion à la base de données
	require('../scripts/php/connexion_db.php');
	$sql=$connexion->query("SELECT * FROM cycles_scolaires"); 
	if(!$sql){
		$erreursql="<div class='row'><div class='col-md-12 alert-danger'><h4 class='alert-danger'>Une erreur s'est produite lors de la sélection des niveaux scolaires! Veuillez informer l'administrateur de l'application (" . $connexion->errno . ") " . $connexion->error."</h4></div></div>";
	}	?>
<div class="row">
		<form name="formenrmatc" method="GET" action="">
			<fieldset><legend>Remplissez les champs suivants</legend>
				<div class="col-sm-12 col-md-12 col-lg-12 form-group has-feedback">
					<div class="col-sm-2 col-md-2 col-lg-2">
						<label for="nivo">Niveau scolaire</label>
						<select name="nivo" id="nivo" class="form-control" onchange="rechargeSelect(<?php echo $repsql['id_cycle_scol']; ?>);">
							<option value='0'>Sélectionnez</option><?php
							while($repsql=$sql->fetch_assoc()){ ?>											
								<option value='<?php echo $repsql['id_cycle_scol'];  ?>' <?php if(isset($nivo)){ if($nivo==$repsql['id_cycle_scol']){ echo"selected"; }else{ echo ""; } } ?>><?php echo $repsql['nom_cycle_scol']; ?></option><?php
							} ?>
						</select>
						<?php if(isset($erreurnivo)) echo $erreurnivo;    ?>										
					</div>
					<div class="col-sm-3 col-md-3 col-lg-3">
						<label for="classe">Classe</label>
						<select name="classe" id="classe" class="form-control" size='1'>
							<option value=0>-- Sélectionnez la classe --</option>
 
						</select>
					</div>
				</div>
			</fieldset>
		</form>
	</div>

Ce que je veux lorsqu'on sélectionne un élément dans le premier select qu'on récupère la valeur contenu dans l'argument value et cette valeur sera utiliser dans une requête dont le résultat sera stocké dans le deuxième select et j'ai pensé à ce code js qui fera certainement rire certains vu que c'est un bricolage que j'ai fais!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script type="text/javascript">
	function rechargeSelect(pId){ 
		$.ajax({
			type: "POST",
			url:"rechargeselect.php",
			dataType: 'html',
			contentType: "application/x-www-form-urlencoded;charset=UTF-8",
			beforeSend: function(xhr) {
			xhr.overrideMimeType('text/html; charset=UTF-8');
			},		
			success:function(data,textStatus){
				$(function(){
					$('#classe').html(data);
					return false;
				});
				//on déclare le nouveau select
				var listeclasse = $("<select id=\"classe\"></select>");
				listeclasse.append(
					$("<option value=\"0\">Choisissez votre classe</option>")
				);
				//on boucle pour avoir les classes dans les options
				var puces = ''; 
				for (var i in data) {
					puces += '<option value="'+data[i].idNivo+'">' + data[i].classe + '</option>';
				}
				listeclasse.append(puces);
				//on remplace le select nouvellement déclaré
				$('#classe').replaceWith(listeclasse);
				//return item.CodePostal;
			},
			error: function (xhr, ajaxOptions, thrownError){
				jAlert("Erreur de traitement Ajax");
			}
		});
	};
</script>

Et voici le code du fichier rechargeselect.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
	if(isset($_POST["nivo"]) and !empty($_POST["nivo"])){
		$nivo=htmlspecialchars($_POST["nivo"]);
	}
	else{ 
		$nivo="<a>Erreur</a>";
	}
	$sqlcl=$connexion->query("SELECT * FROM classes_scolaires WHERE id_cycle_scol='".$nivo."'"); 
	if(!$sqlcl){
		$erreursqlcl="<div class='row'><div class='col-md-12 alert-danger'><h4 class='alert-danger'>Une erreur s'est produite lors de la sélection des classes correspondantes! Veuillez informer l'administrateur de l'application (" . $connexion->errno . ") " . $connexion->error."</h4></div></div>";
	}else{
		while($repcl=$sqlcl->fetch_assoc()){ ?>
			<option value="<?php echo $repcl['id_classe_scol']; ?>"><?php echo $repcl['nom_classe_scol']; ?></option><?php
		} 
	}
?>

Merci d'avance pour vos réponses!

**onesat** · 22/09/2016, 20h11

Essaye ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
	function rechargeSelect(val1) {
		$.ajax({
			type: "POST",
			url: "rechargeselect.php",
			data:'nivo='+val1,
			success: function(data){
				$("#classe").html(data);
				var listeclasse = $("<select id=\"classe\"></select>");
				listeclasse.append(
					$("<option value=\"0\">Choisissez votre classe</option>")
				);
				var listeclasse = $("<select name=\"classe\" id=\"classe\" class=\"form-control\" size=\"1\"></select>");
				listeclasse.append(
					$("<option value=\"0\">Sélectionnez classe</option>")
				);
				//on boucle pour avoir les classes dans les options
				var puces = ''; 
				for (var i in data) {
					puces += '<option value="'+data[i].idNivo+'">' + data[i].classe + '</option>';
				}
				listeclasse.append(puces);
				//on remplace le select nouvellement déclaré
				$('#classe').replaceWith(listeclasse);
			},
			error: function (xhr, ajaxOptions, thrownError){
				jAlert("Erreur de traitement Ajax");
			}
		});
	}

Et dans ta balise select enlève le code php dans ton onchange pour avoir ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<select name="nivo" id="nivo" class="form-control" onchange="rechargeSelect();">

**kinkon** · 23/09/2016, 12h29

J'ai essayé mais quand je fais un choix dans le premier select le contenu du second select se charge avec le premier choix : Sélectionnez classe suivis de plusieurs undefined!

**onesat** · 23/09/2016, 23h56

Voilà j'ai retravaillé sur ton code et sa fonctionne correctement chez moi!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(document).ready(function($) { 
		$('#nivo').change(function(e){
			var select = $('#nivo').val();
			console.log(select);
 
			$.ajax({
				url: 'rechargeselect.php?nivo='+select,
				type: 'GET',
				dataType: 'html',
				contentType: "application/x-www-form-urlencoded;charset=UTF-8",
				beforeSend: function(xhr) {
					xhr.overrideMimeType('text/html; charset=UTF-8');
				},
				success: function(data, statut){
					$(function(){
				$('#classe').html(data);
					return false;
				});
					console.log('succès ' + select);
				},
				error: function(resultat, statut, erreur){
					console.log('erreur ' + select);
				}
			});
		});	
	});

Et le code de ton fichier recharegeselect.php doit ressembler à ceci:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
	if(isset($_GET["nivo"])){
		$nivo=urldecode($_GET["nivo"]); 
		$nivo=htmlspecialchars($_GET["nivo"]); $nivo=strip_tags($_GET['nivo']);
		$valid=true;
		if($nivo=='0'){ $valid=false;		?>
			<option value=0>-- Sélectionnez la classe --</option><?php
		}
		else{
			//Connexion a la base de donnees
			require('connexion_db.php');
			$sqlcl=$connexion->query("SELECT * FROM classes_scolaires WHERE id_cycle_scol='".$nivo."'"); 
			if(!$sqlcl){
				echo"<div class='row'><div class='col-md-12 alert-danger'><h4 class='alert-danger'>Une erreur s'est produite lors de la sélection des classes correspondantes! Veuillez informer l'administrateur de l'application (" . $connexion->errno . ") " . $connexion->error."</h4></div></div>";
			}
			else{ 
				if(mysqli_num_rows($sqlcl)<>0){?> 
					<option value=0>-- Sélectionnez la classe --</option><?php
					while($repcl=$sqlcl->fetch_assoc()){ ?>
						<option value="<?php echo $repcl['id_classe_scol']; ?>"><?php echo $repcl['nom_classe_scol']; ?></option><?php
					} 
				}
				else{?>
					<option value=0>-- Sélectionnez la classe --</option>
					<option>Vide (Ajouter les classes)</option><?php					
				}
			} 
		}
	}
?>

Remplir un select par un autre select

AJAX

Discussions similaires

Partager

Partager