Skip to content

Instantly share code, notes, and snippets.

@KOUISAmine
Created February 8, 2017 12:38
Show Gist options
  • Save KOUISAmine/f2f236156ac2cd8a7ce021f8d2af3cf3 to your computer and use it in GitHub Desktop.
Save KOUISAmine/f2f236156ac2cd8a7ce021f8d2af3cf3 to your computer and use it in GitHub Desktop.
Comment créer une liste déroulante dépendante d'une autre liste déroulante avec jQuery/PHP/MYSQL
<!DOCTYPE html>
<?php
$conn = new mysqli('localhost', 'root', '', 'db_voiture') or die(mysqli_error());
?>
<html lang = "eng">
<head>
<meta charset = "UTF-8" />
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
</head>
<body>
<nav class = "navbar navbar-default" style="background-color: #337ab7;">
<div class = "container-fluid">
<a class = "navbar-brand" href = "https://codes-src.blogspot.com" style="color: #fff;">Codes Src</a>
</div>
</nav>
<div class = "container-fluid">
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-6 well">
<h4 class = "text-primary">Liste déroulante dépendante d'une autre liste déroulante</h4>
<hr style = "border-top: 1px dotted #8c8b8b;"/>
<form class = "form-inline">
<div class = "form-group">
<label>Group de voiture :</label>
<select id = "group" class = "form-control" name = "voiture-group" required = "required">
<option value = "">Select a group</option>
<?php
$g_voiture = $conn->prepare("SELECT * FROM voiture GROUP BY voiture_group");
if($g_voiture->execute()){
$g_result = $g_voiture->get_result();
}
while($f_gvoiture = $g_result->fetch_array()){
?>
<option value = "<?php echo $f_gvoiture['voiture_group']?>"><?php echo $f_gvoiture['voiture_group']?></option>
<?php
}
$conn->close();
?>
</select>
</div>
<div class = "form-group">
<label>voiture:</label>
<select id = "voiture" name = "voiture" class = "form-control" disabled = "disabled" required = "required">
<option value = "">Selectionner une voiture</option>
</select>
</div>
</form>
</div>
</div>
</div>
</body>
<script src = "js/jquery-3.1.1.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
$('#group').on('change', function(){
if($('#group').val() == ""){
$('#voiture').empty();
$('<option value = "">Selectionner une voiture</option>').appendTo('#voiture');
$('#voiture').attr('disabled', 'disabled');
}else{
$('#voiture').removeAttr('disabled', 'disabled');
$('#voiture').load('voiture_get.php?voiture_group=' + $('#group').val());
}
});
});
</script>
</html>
@KOUISAmine
Copy link
Author

Visiter notre site : https://codes-src.blogspot.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment