相关的下拉 Jquery 选项列表 JSON 错误

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，正如Nigel Ren所说。所以，你不需要使用json.parse。另外我在您的 html 代码中没有找到任何名称为 product 的 ID。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



                 }
                    });
            });