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

Question

我有3個不同的選擇框。 根據第一個選擇框的值，通過ajax + php填充第二個和第三個選擇框。 但是回應卻不如我預期。 它顯示錯誤功能。 當我從控制台檢查它時，從數據庫以json格式讀取數據沒有問題。 但是我無法將這些數據顯示為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){...});