Ошибка JSON зависимого выпадающего списка Jquery

Question

Ребята, я новичок в Jquery и Json, пытаюсь создать список зависимых опций с помощью Jquery, но он не работает.Я ожидаю вашей доброй помощи.вот мой HTML-код ..

<div class="form-group">
    <label for="categoriesId">
        Categories</label>
    <select class="form-control" id="categoriesId" name="categoriesId">
        <option selcted="">Select
            Categories</option>
        <?php                   
            getCat();
        ?>
    </select>
</div>

и мой fetchProductDta.php код страницы здесь

<?php   
    require_once 'db_connect.php';
    if(isset($_POST['cid'])){
        $sql = "SELECT product_id, product_name 
             FROM product WHERE categories_id = '". $cid 
             ."'";
        $result = $connect->query($sql);
        while($product = $productData->fetch_array()) {                                     
             echo "<option value='".$product['product_id']."'> 
                 ".$product['product_name']."</option>";
       }  
    }
?>

Мой код Jquery здесь

$(document).ready(function () {
    $("#categoriesId").change(function () {
        var cid = $("#categoriesId").val();
        $.ajax({
            url: 'fetchProductData.php',
            method: 'POST',
            data: 'cid' + cid
                .done(function (product) {
                    console.log(product);
                    product = json.parse(product);
                    product.forEach(function (products) {
                        $('#product').appned();
                    });
                });
        });

Answer 1

В вашем jquery у вас есть ошибки, в первую очередь вы получаете html response с сервера, как сказал Найджел Рен . Итак, чтобы получить, что вам не нужно использовать json.parse. Также яЯ не нашел ни одного идентификатора с именем product в вашем html-коде, и в jquery нет функции appned. Так что сделайте ниже изменения в своем коде, чтобы он работал.

  $(document).ready(function () {
     $("#categoriesId").change(function () {
            var cid = $("#categoriesId").val();
            $.ajax({
                url: 'fetchProductData.php',
                method: 'POST',
                data: {cid : cid },
                     success:function(data){

                $("#product").html(data);//here response from server will be display in #product



                 }
                    });
            });