在另一个下拉列表的基础上填充下拉列表

Question

我正在尝试使用 ajax 在 php 中的另一个组合框基础上填充组合框。我创建了两个文件 category_dropdown.php 和 subcategory_dropdown.php。

我的 category_dropdown.php 文件如下。

<?php
include 'connect.php';
$q = mysql_query("select * from category") or die(mysql_error());
if (mysql_num_rows($q)) {
$data = array();
while ($row = mysql_fetch_array($q)) {
$data[] = array(
'id' => $row['category_id'],
'name' => $row['category_name']
);
}
header('Content-type : application/json');
echo json_encode($data);
}

我的 subcategory_dropdown.php 文件如下。

<?php
include 'connect.php';
if(isset($_GET["catname"])){
$c=$_GET["catname"];
$q=  mysql_query("select * from subcategory where cat_id='$c'") or         die(mysql_error());
if(mysql_num_rows($q)){
$data=array();
while($row=  mysql_fetch_array($q)){
$data[]=array(
'id'=>$row['sub_id'],
'name'=>$row['sub_name'],
);
}
header('Content-type : application/json');
echo json_encode($data);
}else{
echo 'error';
}
}

然后我使用了 javascript 来填充组合框

<script type="text/javascript">
    $(document).ready(function() {
        Category();
        $("#cat").change(function() {
            var textbox3 = document.getElementById('cat');
            val = textbox3.value;
            Sub(val);
        });
    });


    function Category() {
        $('#cat').empty();
        $('#cat').append("<option>Loading....</option>");
        $('#subcat').append("<option>--Select SubCategory--</option>");
        $.ajax({
            type: "POST",
            url: "category_dropdown.php",
            contentTYpe: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                $('#cat').empty();
                $('#cat').append("<option value='0'>--Select Category--</option>");
                $.each(data, function(i, item) {
                    $('#cat').append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
                });
            },
            complete: function() {}
        });
    }

    function Sub(catname) {
        $('#subcat').empty();
        $('#subcat').append("<option>Loading....</option>");
        $.ajax({
            type: "POST",
            url: "subcategory_dropdown.php?catname=" + catname,
            contentTYpe: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                $('#subcat').empty();
                $('#subcat').append("<option value='0'>--Select SubCategory--</option>");
                $.each(data, function(i, item) {
                    $('#subcat').append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
                });
            },
            complete: function() {}
        });
    }
</script>

但是当我运行这个函数时，我的第一个下拉框（category_dropdown.php）没有填满。它只显示“正在加载......”。

为什么会这样。我有问题的地方。 请帮忙。

Answer 1

我的建议是首先运行您的查询并测试您的 SQL。如果您知道您的 SQL 正在运行，那么我将测试您的 PHP 并通过设置一些静态测试变量来确保逻辑正常运行。如果这有效，那么您很可能知道您的 AJAX 调用。也尝试按照 caCtus 的建议在浏览器中运行控制台窗口。 JS 控制台可以成为救命稻草。一开始可能看起来有点乏味，但排除每个技术层是值得的，因为它可以更好地隔离和识别问题所在。