在另一个下拉列表中填写下拉基础

时间:2015-06-08 16:26:29

标签: javascript php ajax

我试图使用ajax.i创建两个文件category_dropdown.php和subcategory_dropdown.php来填充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';
}
}

然后我使用了follw 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)没有填充。它只说“正在加载........”。

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

1 个答案:

答案 0 :(得分:0)

我的建议是先运行查询并测试SQL。如果您知道您的SQL正在运行,那么我将测试您的PHP,并通过设置一些静态测试变量来确保逻辑正常工作。如果可以,那么你知道它很可能是你的AJAX调用。还可以尝试在浏览器中运行控制台窗口,如caCtus推荐的那样。 JS Console可以成为救生员。一开始可能看起来有点乏味,但排除每个技术层是值得的,因为它为问题所在的位置提供了更好的隔离和识别。