从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来做，因为它更好。任何建议？

是的，你有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>

谢谢本，工作！ –

本，抱歉再次打扰，但我怎么能改变jquery使用已经包含json的变量？导致该URL我只用它来尝试页面，我在此页面之前使用了一个帖子到api，并且帖子返回了我一个json，并且该json与myjson api完全相同。 –

你不需要为此使用jQuery。在我的脑海里，'a = {'a'：1}'会起作用。但我不建议你这样做，因为所有其他东西（HTML）都是静态的。分离静态和动态内容将有助于浏览器充分利用缓存，这对服务器和客户端都有好处。 – Ben

从PHP中的JSON另一个下拉过滤器下拉列表

相关推荐