javascript - 在更改第一个 SELECT 时添加第二个 SELECT (PHP/AJAX) 无法正常工作

Question

首先，让我表示我已经尝试了四种方法(都略有不同)，它们似乎都会产生相同的问题，即没有输出数据，甚至简单的 echo 'test' 来排除数据库问题(以及在被调用的页面上尝试在 html 中进行测试，没有结果。

这是 HTML 和 Javascript 的快照:

(document).on('change','category_id',function(){
    var id = $(this).val();
    $.ajax({
        method: 'POST',
        url: 'supportgetsubcats.php',
        data: {'subcatid' : id},
        success: function(data){
            $('#subcatresponse').hide().html(data).fadeIn(); // update the DIV
        }
    });
});

<div class="form-group">
                    <label class="col-sm-2 control-label">Category *</label>
                    <div class="col-sm-4">
                        <select class="form-control" class="category_id" name="category_id" id="category_id">
                            <option value="" selected="selected">-- Select --</option>
                            <?php
                            $query="select * from support_categories where hide = '0' or hide is NULL order by name ASC";
                            $rs=sqlsrv_query($conn,$query);
                            while($row=sqlsrv_fetch_array($rs))
                            {
                                extract($row);
                                ?>
                                <option value="<?php echo $id; ?>"><?php echo $name; ?></option>
                                <?php
                            }
                            ?>
                        </select>
                    </div>
                </div><!-- form-group -->
                <div class="form-group">
                    <div id="subcatresponse" name="subcatresponse" class="col-sm-4">
                    </div>
                </div><!-- form-group -->

下面是调用的 PHP:

<?php require_once("includes/header.php");
error_reporting(E_ALL);
echo 'TEST';
if(isset($_POST["subcatid"])){
    // Capture selected country
    $category = $_POST["subcatid"];

    $query="select * from support_subcategories where parent_category = '" . $category . "' order by name ASC";
    $rsp=sqlsrv_query($conn,$query);
    $subCatArr = array();
    while($row=sqlsrv_fetch_array($rsp))
    {
      $subcat = $row['name'];
      array_push($subCatArr, $category, $subcat);
    }

    // Display city dropdown based on country name
    if($category == '-- Select --'){
    } else {
        echo '<label class="col-sm-2 control-label">Sub Category</label>';
        echo '<select class="form-control" name="subcategory_id" id="subcategory_id">';
        foreach($subCatArr[$category] as $value){
            echo '<option value="'. $value .'">'. $value .'</option>';
        }
        echo "</select>";
    }
}
?>

我没有得到任何响应，甚至没有返回基本文本，所以我不完全确定 AJAX 调用出了什么问题，jQuery 已包含在内并被证明可以正常工作，因为如果没有 jQuery，此界面上的菜单系统将无法显示，因此我相信这不是问题。

无论出于何种原因，HTML Select 中的数据似乎都没有传递到 POST 的 AJAX 调用。

非常感谢任何想法，TIA。

Answer 1

尝试改变

(document).on('change', 'category_id', function() { 到

$(document).on('change', '#category_id', function() {

on 调用的第二个参数采用选择器，但您似乎传递的是元素的名称。在 PHP 中尝试访问元素时会使用元素的名称，而在 JavaScript 中则使用选择器(id、class、element)。

或者，您也可以使用

$('#category_id').on('change', function()

您尚未在问题中发布它，但如果您没有它，最好只在页面加载完成后执行 jQuery 代码，否则您的代码可能会尝试访问尚未加载的元素。

用
包围您的 jQuery 代码

$(document).ready(function() {
    // Run jQuery code
}