從PHP中的JSON另一個下拉過濾器下拉列表

我正在從一個JSON構建2個下拉的表單上，我有經理和JSON中的該經理的可用時間。從PHP中的JSON另一個下拉過濾器下拉列表

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" 
       } 
      ] 
     } 
     ] 
    } 
]

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>

我可以看到在下拉列表中Gestor價值，但我要過濾的第二個下拉給我看時，我選擇例如codGestor 2，使第二個下拉與horarios可用。

在HTML代碼中，我使用myjson.com API來爲JSON服務，但實時我會在PHP變量中使用該JSON。我讀過幾個論壇，推薦使用JavaScript來做，但我想用jQuery來做，因爲它更好。任何建議？

來源

2017-09-26 E. Galdamez

是的，你有JS來做到這一點。搜索動態下拉菜單。 – Jeff

將jsonData寫入一個js var，然後對第一個select的Select選擇進行反應，以填充第二個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>

來源

2017-09-26 23:26:03 Ben

謝謝本，工作！ –

本，抱歉再次打擾，但我怎麼能改變jquery使用已經包含json的變量？導致該URL我只用它來嘗試頁面，我在此頁面之前使用了一個帖子到api，並且帖子返回了我一個json，並且該json與myjson api完全相同。 –

你不需要爲此使用jQuery。在我的腦海裏，'a = {'a'：1}'會起作用。但我不建議你這樣做，因爲所有其他東西（HTML）都是靜態的。分離靜態和動態內容將有助於瀏覽器充分利用緩存，這對服務器和客戶端都有好處。 – Ben

從PHP中的JSON另一個下拉過濾器下拉列表

回答

相關問題