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

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

附言我是 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>';
}