JavaScript双选择

我的3个选择框有问题。选择第一个和第二个选择框后，应填充第二个和第三个选择框

从选择框1中选择值后，将填充选择框2。 从选择框2中选择值后，将填充选择框3

我的代码有两个问题：

它会根据第一个值自动填充第二个选择框，但不会填充第三个选择框 更改后，它将填充选择框，但如果我更改第一个选择框，它将更新第二个选择框，但第三个选择框不会基于第二个选择框的值进行更新。它仅在我更改第二个选择框中的值后填充。 我的代码：

<script type="text/javascript">
jQuery(document).ready(function() {
    $("#category").change(function(){ 
        getSubCat();//get sub category after change event
    });
    $("#subcategory").change(function(){ 
        getSubSubCat(); //get sub category after change event
    });
    getSubCat();//get sub category after page load
    getSubSubCat();
    function getSubCat(){
        var selectedCategory = $("#category option:selected").val();
        $.ajax({
            type: "POST",
            url: "subcat.php",
            data: { category : selectedCategory } 
        }).done(function(data){
            $("#subcategory").html(data);
        });
    }
    function getSubSubCat(){
        var selectedSubCategory = $("#subcategory option:selected").val();
        $.ajax({
            type: "POST",
            url: "subsubcat.php",
            data: { subcategory : selectedSubCategory } 
        }).done(function(data){
            $("#subsubcategory").html(data);
        });
    }        
});
</script>

您能帮助我吗？

getSubCat的.done函数应该调用getSubSubCat

在页面加载期间调用getSubSubCat时，getSubCat尚未完成，因为AJAX是异步的，所以没有对第二个菜单进行任何更改

function getSubCat(){
    var selectedCategory = $("#category option:selected").val();
    $.ajax({
        type: "POST",
        url: "subcat.php",
        data: { category : selectedCategory } 
    }).done(function(data){
        $("#subcategory").html(data);
        getSubSubCat();
    });
}