用不同的json數據填充不同的選擇框

Question

我有3個不同的選擇框。第二個和第三個選擇框將根據第一個選擇框的值通過ajax + php填充。但是迴應並不如我預期的那樣。它顯示錯誤功能。當我從控制檯檢查它時，沒有以數據庫格式讀取數據的promlem。但是，我無法將這些數據顯示爲屏幕上的html。這裏是我的嘗試：

HTML：

<table> 
    <tr> 
     <td valign="middle" align="center"> 
      <label id="fieldOfBusinessLabel" for="fieldOfBusinessText">Field of Business</label> 
     </td> 
     <td valign="middle" align="center"> 
      <select id="fieldOfBusinessSelectBox" class="selectBox" name="fieldOfBusinessSelectBox"> 
       <option value="">--select--</option> 
       <?php 
        $result=mysqli_query($db,'SELECT * FROM field_of_business'); 
        while($row=mysqli_fetch_assoc($result)) { 
         echo '<option value="'.$row["FobID"].'">'.$row['FobName'].'</option>'; 
        }                  
       ?> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td valign="middle" align="center"> 
      <label id="typeOfProductionLabel" for="typeOfProductionText">Type of Production/Service</label> 
     </td> 
     <td valign="middle" align="center"> 
      <select id="typeOfProductionSelectBox" clas="selectBox" name="typeOfProductionSelectBox"> 
       <option value="">--select--</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td valign="middle" align="center"> 
      <label id="mainProductsLabel" for="mainProductsText">Main Products/Services</label> 
     </td> 
     <td valign="middle" align="center"> 
      <select id="mainProductSelectBox" clas="selectBox" name="mainProductSelectBox"> 
       <option value="">--select--</option> 
      </select> 
     </td> 
    </tr> 
</table> 

JS：

$(document).ready(function(){ 
    $("#fieldOfBusinessSelectBox").change(function(){ 
     var value = $("select#fieldOfBusinessSelectBox option:selected").val(); 
     $.ajax({ 
      type: 'POST', 
      url: 'listData.php', 
      dataType: "json", 
      data:{fobID:value}, 
      success:function(answer){ 
       var data1 = "<option>--select--</option>"; 
       var data2 = "<option>--select--</option>"; 
       $.each(answer, function(i, answer){ 
        data1 += "<option>"+answer.TopsName+"</option>"; 
       }); 
       $.each(answer, function(i, answer){ 
        data2 += "<option>"+answer.MpsName+"</option>"; 
       }); 
       $('#typeOfProductionSelectBox').html(data1); 
       $('#mainProductSelectBox').html(data2); 
      }, 
      error:function(){ 
       alert("An error has occured !"); 
      }   
     }); 
    }); 
}); 

PHP：

<?php 

    include './config.php'; 

    if(strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest'){ 
     die('Wrong request !'); 
    } 
    $fobID = mysqli_real_escape_string($db,$_POST['fobID']);  

    if(isset($_POST['fobID'])){ 
     $stmt1 = $db->prepare("SELECT TopsName FROM type_of_production_service WHERE FobID = ?"); 

     if($stmt1 == "false"){ 
      die('Query error !'.$db->error); 
     } 
     $stmt1->bind_param('i', $fobID); 
     $stmt1->execute(); 
     $result = $stmt1 -> get_result(); 
     $topsName = $result ->fetch_all(MYSQLI_BOTH); 

     echo json_encode($topsName); 

     $stmt2 = $db->prepare("SELECT MpsName FROM main_products_services WHERE FobID = ?"); 

     if($stmt2 == "false"){ 
      die('Query error !'.$db->error); 
     } 
     $stmt2->bind_param('i', $fobID); 
     $stmt2->execute(); 
     $result2 = $stmt2 -> get_result(); 
     $mpsName = $result2 ->fetch_all(MYSQLI_BOTH); 

     echo json_encode($mpsName); 
    } 

    $db->close(); 

Answer 1

你有2 json_encoded在結果字符串，它不解碼。用戶一個JSON對象：
PHP：

echo json_encode(array('mps' => $mpsName, 'tops' => $topsName)); 

JS：

answer = $.parseJSON(answer); 
$.each(answer.tops, function(k,v){...}); 
$.each(answer.mps, function(k,v){...});