Ajax：只刷新所需的PHP部分

Question

我有一个图库，有3个组合框，允许用户过滤图像。我已经构建了它，以便用户可以选择1,2或全部3个组合框，然后通过单击提交按钮提交他们的选择。这非常有效。

如果用户选择1或2个组合框，然后单击“提交”，则未刷新的组合框将刷新，其中仅包含基于用户选择的可能选项。这会在刷新图像时发生。

我想要做的是让未选中的组合框在组合框的.change上刷新而不用图像刷新。

看到Ajax success: function()使用div将连接的PHP加载到.html，我想到的唯一方法就是创建对第二个PHP的第二个Ajax调用文件，在组合框.change上被触发，但这对我来说似乎不对，而且我怀疑我只是不知道做我想要的正确方法。

如果您有一些建议，我们将不胜感激。

我包括jQuery，但不包括PHP，因为我认为它与这个问题无关。如果我错了，请告诉我，我会非常乐意发布它。

jQuery：

$(document).ready(function() {

    function loadData(imgFamily, imgClass, imgGender){
        $.ajax
        ({
            type: "GET",
            url: "filter_test.php",
            data: {imgFamily:imgFamily, imgClass:imgClass, imgGender:imgGender},
            success: function(images) {
                $("#gallery_container").html(images);
                comboRefresh(imgFamily, imgClass, imgGender);
                submitData(imgFamily, imgClass, imgGender);
            },
        });
    }

    //function to refresh combo boxes on change
    function comboRefresh(imgFamily, imgClass, imgGender) {
        $('.filter').change(function() {
            $.get("combo_box_refresh.php", {
                imgFamily: $('#imgFamily').attr('value'),
                imgClass: $('#imgClass').attr('value'),
                imgGender: $('#imgGender').attr('value'),
            }, function(refresh){
                $("#refine").html(refresh);

                submitData(imgFamily, imgClass, imgGender);
            });
            return false;
        });
    }

    //Function to submit combo boxes and fetch images
    function submitData(imgFamily, imgClass, imgGender) {
        //Bind the click event to Ajax call on submit
        $("#submit").click(function(){
            var imgFamily = $('#imgFamily').attr('value');
            var imgClass = $('#imgClass').attr('value');
            var imgGender = $('#imgGender').attr('value');
            //Fetch the images
            loadData(imgFamily, imgClass, imgGender);
        });
    }


    loadData();  // For first time page load default results

});