通过 PHP 中 JSON 的另一个下拉列表过滤下拉列表答案

【问题标题】：Filter dropdown by another dropdown from a JSON in PHP通过 PHP 中 JSON 的另一个下拉列表过滤下拉列表
【发布时间】：2018-03-08 07:05:56
【问题描述】：

我正在处理一个从单个 json 构建 2 个下拉列表的表单，我在 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，但在实时情况下，我会将 JSON 保存在 PHP 变量中。我在几个论坛上读过建议用 JavaScript 来做，但我想用 jquery 来做，因为它更好。有什么建议吗？

【问题讨论】：

是的，你必须用js来做。搜索动态下拉菜单。
将 jsonData 写入 js var，然后响应第一个 select 的 onSelect 填充第二个 select 的选项。

标签： php json drop-down-menu filter dropdown

【解决方案1】：

$.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>

【讨论】：

Ben，很抱歉再次打扰，但我怎样才能更改 jquery 以使用已经包含 json 的变量？因为那个 URL 我只是用它来尝试这个页面，我在这个页面之前使用了一个 api 的帖子，这个帖子给我返回了一个 json，并且那个 json 与 myjson api 完全相同。
你不需要为此使用 jQuery。在我看来a={'a':1} 会起作用。但我不建议你这样做，因为所有其他的东西（HTML）都是静态的。分离静态和动态内容将有助于浏览器充分利用缓存，这对服务器和客户端都有好处。
所以只需编写另一个 php，只需重新调整 json 代码并使用getJSON('url-to-that-php')！ @E.Galdamez