Динамически зависимые поля выбора (PHP + JQuery + AJAX)

Question

Я работаю над зависимой формой ящиков, используя PHP в качестве серверного языка и JQuery с Ajax. У меня возникла проблема с получением текста ответа, поскольку он не отображается как параметры во втором поле выбора.

P.S. Я новичок в 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

Я мог бы быть неправильно, но я не думаю, что вы отправили 'catSelect' в запрос ajax .. скорее, Отправили category с data является значением из 'catSelect'

Так что, когда вы смотрите на $catSelectVal = $_POST['catSelect']; там не будет ничего найти.

Попробуйте вместо этого: $catSelectVal = $_POST['category'];

Как @RiggsFolly упоминалось выше, если вы print_r($_POST); вы будете мгновенно увидеть, если это так или нет.