Dynamisch abhängige Auswahlfelder (PHP + JQuery + AJAX)

Question

Ich habe an einem abhängigen Auswahlkästchen-Formular mit PHP als serverseitige Sprache und JQuery mit Ajax gearbeitet. Ich habe ein Problem mit dem Abrufen des Antworttextes, da er nicht als Optionen im zweiten Auswahlfeld angezeigt wird.

P.S. Ich bin neu bei Ajax und es gibt kein Video, das mir bei meinem Problem helfen kann.

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-Code:

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

Der Code, der langsam in die Optionen für die zweite Auswahlfeld funktionieren sollte:

$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

Ich könnte sein, falsch, aber ich glaube nicht, dass Sie 'catSelect' in der Ajax-Anfrage gesendet haben. ve category geschickt mit data der Wert von 'catSelect'

So ist, wenn Sie für $catSelectVal = $_POST['catSelect']; aussehen wird es nichts zu finden sein.

Versuchen Sie stattdessen: $catSelectVal = $_POST['category'];

Wie @RiggsFolly erwähnt, wenn Sie print_r($_POST); Sie sofort werden sehen, ob dies der Fall ist oder nicht.