Filtre déroulant par une autre liste déroulante d'un JSON en PHP

Je travaille sur un formulaire qui construit 2 dropdown à partir d'un seul json, j'ai le gestionnaire et le temps disponible pour ce gestionnaire dans le JSON.Filtre déroulant par une autre liste déroulante d'un JSON en PHP

exemple JSON:

[ 
    { 
     "Error":0, 
     "Fecha":"21/09/2017", 
     "Gestores":[ 
     { 
      "codGestor":"2", 
      "Gestor":"Harold", 
      "horarios":[ 
       { 
        "horaM":"0700", 
        "hora":"07:00AM" 
       }, 
       { 
        "horaM":"0800", 
        "hora":"08:00AM" 
       }, 
       { 
        "horaM":"0900", 
        "hora":"09:00AM" 
       } 
      ] 
     }, 
     { 
      "codGestor":"3", 
      "Gestor":"Ramon", 
      "horarios":[ 
       { 
        "horaM":"0700", 
        "hora":"07:00AM" 
       }, 
       { 
        "horaM":"0800", 
        "hora":"08:00AM" 
       }, 
       { 
        "horaM":"0900", 
        "hora":"09:00AM" 
       }, 
       { 
        "horaM":"1000", 
        "hora":"10:00AM" 
       } 
      ] 
     } 
     ] 
    } 
]

formulaire HTML:

<?php 
session_start(); 
if(!empty($_SESSION['jsonVelneo'])){ 
$json = $_SESSION['jsonVelneo']; 
} 
?> 

<!DOCTYPE html> 
<html lang="en"> 

    <head> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta name="description" content=""> 
    <meta name="author" content="SGLabz"> 

    <title>CitasWeb</title> 

    <!-- Bootstrap core CSS --> 
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom styles for this template --> 
    <link href="../css/portfolio-item.css" rel="stylesheet"> 
    <link rel="stylesheet" href="../css/form-basic.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script> 
    <script src="../js/form.js"></script> 
    <link href="../css/pikaday.css" rel="stylesheet"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

    </head> 

    <body> 

    <!-- Navigation --> 
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> 
     <div class="container"> 
     <a class="navbar-brand" href="#">CitasWeb</a> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 
     </div> 
    </nav> 

    <!-- Page Content --> 
    <div class="container"> 

     <!-- Portfolio Item Row --> 
     <form class="form-basic" id="form-basic" action="/" method="post"> 

      <div class="form-title-row"> 
       <h1>Seleccionar</h1> 
      </div> 

      <div class="form-row"> 
       <label> 
        <span>Gestor</span> 
        <?php 

        echo '<select name="Gestor">'; 
        $jsonData = file_get_contents('https://api.myjson.com/bins/f7d29'); 
        $jsonDataObject = json_decode($jsonData); 

        foreach($jsonDataObject->Gestores as $option){ 
         echo '<option value=' . $option->codGestor . '>' . $option->Gestor . '</option>'; 
        } 

        echo '</select>'; 
        ?> 
       </label> 
      </div> 

      <div class="form-row"> 
       <label> 
        <span>Horarios</span> 
        <?php 

        echo '<select name="horarios">'; 
        $jsonData = file_get_contents('https://api.myjson.com/bins/f7d29'); 
        $jsonDataObject = json_decode($jsonData); 

        foreach($jsonDataObject->Gestores->codGestor['Gestor'] as $option){ 
         echo '<option value=' . $option->horaM . '>' . $option->Hora . '</option>';     } 

        echo '</select>'; 
        ?> 
       </label> 
      </div> 

      <div class="form-row"> 
       <button id="consularHorario" >Consultar Horarios</button> 

    </div> 
    <!-- /.container --> 

    <!-- Footer --> 
    <footer class="py-5 bg-dark"> 
     <div class="container"> 
     <p class="m-0 text-center text-white">Copyright &copy; Citas Web 2017</p> 
     </div> 
     <!-- /.container --> 
    </footer> 

    <!-- Bootstrap core JavaScript --> 
    <script src="vendor/jquery/jquery.min.js"></script> 
    <script src="vendor/popper/popper.min.js"></script> 
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script> 
    <script src="../js/pikaday.js"></script> 
    <script src="../js/moment.js"></script> 
    </body> 
</html>

Je peux voir la valeur Gestor sur le menu déroulant, mais je veux filtrer la deuxième liste déroulante pour me montrer lorsque je choisis par exemple codGestor 2, pour rendre la deuxième liste déroulante avec horarios disponible.

Dans le code HTML, j'utilise l'API myjson.com pour servir le JSON mais en temps réel j'aurai ce JSON dans une variable PHP. J'ai lu dans quelques forums qui recommandent de le faire avec JavaScript, mais je veux le faire avec jquery parce que c'est mieux. Des recommandations?

Source

2017-09-26 E. Galdamez

oui, vous devez le faire avec js. rechercher une liste déroulante dynamique. – Jeff

écrivez jsonData dans un js var, puis réagissez sur Select du premier select pour remplir les options du second select. – Jeff

$.getJSON('https://api.myjson.com/bins/f7d29', function(data) { 
 
    var s = document.getElementsByName('s1')[0]; 
 
    var s2 = document.getElementsByName('s2')[0]; 
 
    for (i = 0; i < data.Gestores.length; i++) { 
 
    var a = document.createElement('option'); 
 
    a.value = data.Gestores[i].codGestor; 
 
    a.innerHTML = data.Gestores[i].Gestor; 
 
    s.appendChild(a); 
 
    } 
 
    s.onchange = function() { 
 
    while (s2.firstChild) s2.removeChild(s2.firstChild); 
 
    var d = data.Gestores[this.selectedIndex].horarios; 
 
    for (i = 0; i < d.length; i++) { 
 
     var a = document.createElement('option'); 
 
     a.value = d[i].horaM; 
 
     a.innerHTML = d[i].hora; 
 
     s2.appendChild(a); 
 
    } 
 
    }; 
 
    s.onchange(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="s1"></select><br> 
 
<select name="s2"></select>

Source

2017-09-26 23:26:03 Ben

Merci Ben, ça a marché !!! –

Ben, désolé de me déranger à nouveau mais comment puis-je changer la jquery pour utiliser une variable qui contient déjà le json? parce que cette URL je l'utilise juste pour essayer la page, j'utilise un post à un api avant cette page et le post me renvoie un json, et ce json est exactement le même pour le myjson api. –

Vous n'avez pas besoin d'utiliser jQuery pour cela. Dans mon esprit 'a = {'a': 1}' fonctionnerait. Mais je ne vous recommande pas de le faire, car toutes les autres choses (HTML) sont statiques. La séparation des contenus statiques et dynamiques aidera le navigateur à tirer pleinement parti de la mise en cache, ce qui serait bon pour le serveur et le client. – Ben

Filtre déroulant par une autre liste déroulante d'un JSON en PHP

Répondre

Questions connexes