PHPのJSONからの別のドロップダウンによるフィルタのドロップ

私は1つの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番目のドロップダウンをフィルタリングします2を使用して、2番目のドロップダウンを利用できるようにします。

HTMLコードでは、myjson.com APIを使用してJSONを処理していますが、リアルタイムではそのJSONをPHP変数で使用します。私はJavaScriptでそれを行うことをお勧めしますカップルのフォーラムで読んだが、私はjqueryでそれを行うためにしたい。どんな勧告？

出典

2017-09-26 E. Galdamez

はい、あなたはJSでそれをしなければなりません。動的なドロップダウンを検索します。 – Jeff

jsonDataをjs varに書き込み、最初のselectのonSelectに反応して、2番目の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

ありがとうございました。 –

Ben、もう気にして申し訳ありませんが、jsonが既にjsonを含む変数を使用するようにjqueryを変更するにはどうすればよいですか？そのURLを私はページを試すのに使っています。私はこのページの前にapiへの投稿を使用し、投稿は私にjsonを返し、そのjsonはmyjson apiとまったく同じです。 –

jQueryを使用する必要はありません。私の心の中では、a = {'a'：1} 'が働きます。しかし、私はそれをすることをお勧めしません。他のすべてのもの（HTML）は静的であるためです。静的コンテンツと動的コンテンツを分離することで、ブラウザはサーバーとクライアントの両方にとって良いキャッシュをフルに活用できます。 – Ben

PHPのJSONからの別のドロップダウンによるフィルタのドロップ

答えて

関連する問題