Created
February 8, 2017 12:38
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Visiter notre site : https://codes-src.blogspot.com