动态依赖选择框（PHP+JQuery+AJAX）

Question

我一直在使用 PHP 作为服务器端语言和使用 Ajax 的 JQuery 开发一个依赖选择框表单。我在获取响应文本时遇到问题，因为它没有在第二个选择框中显示为选项。

附：我是 Ajax 新手，没有任何视频可以帮助我解决问题。

HTML&PHP：

<center><form method="post" action="php/functions.php" id="catForm">
<select name="catSelect" class="catSelect" name="category">
<option value='null' default>اختر الفئة:</option>
<?php 
        $selectCategories = mysqli_query($connectionDB, "SELECT * FROM categories");

        while($categoriesDisplay = mysqli_fetch_array($selectCategories)){
    echo '<option value="'.$categoriesDisplay['id'].'">'.$categoriesDisplay['category'].'</option>';
        }
 ?>
</select><br/><br/>

<select name="subCatSelect" class="subCatSelect">
<option value="null" default>اختر النوع:</option>
<?php
$catSelectVal = $_POST['catSelect'];
$selectSubCat = mysqli_query($connectionDB, "SELECT * FROM sub_categories WHERE id LIKE '$catSelectVal'");

while($subCatDisplay = mysqli_fetch_array($selectSubCat)){
    echo '<option value="'.$subCatDisplay['id'].'">'.$subCatDisplay['subCategory'].'</option>';
}

?>
</select><br/>
<h1></h1>
<input type="submit" value="اختر" class="submitForm" /><br/>
</form></center>

jQuery 代码：

$(document).ready(function(){
    $('.catSelect').change(function(){
        var changeURL = $('#catForm').attr("action");
        var data = $('.catSelect').val();
        $.post(changeURL, {category : data}, function(subCategory){
            $('.subCatSelect').append(subCategory);
        });
    });
});

获取第二个选择框选项的代码：

$catSelectVal = $_POST['catSelect'];
$selectSubCat = mysqli_query($connectionDB, "SELECT * FROM sub_categories WHERE id LIKE '$catSelectVal'");

while($subCatDisplay = mysqli_fetch_array($selectSubCat)){
    echo '<option value="'.$subCatDisplay['id'].'">'.$subCatDisplay['subCategory'].'</option>';
}

Answer 1

我可能是错的，但我认为您没有在 ajax 请求中发送 'catSelect'。而是您发送了 category ，其中 data 是来自 'catSelect' 的值

因此，当您查找 $catSelectVal = $_POST['catSelect']; 时，将找不到任何东西。

改用：$catSelectVal = $_POST['category'];

正如@RiggsFolly 提到的，如果您print_r($_POST); 您会立即看到是否是这种情况。