javascript - 如何使用 Ajax 使用第一个选择框值更新 jquery 中的第二个选择框？

Question

首先，我使用的是 WordPress，目标是选择一个以 jquery 结构的下拉选择菜单项，以选择父类别。然后，此选择将​​使用父类别的子类别更新第二个选择菜单。

到目前为止，我有这个ajax:

<script>
$(function(){
    $( "#categories" )
      .selectmenu({
        select: function getval() {
        var parent = $("#categories").val();

        $.ajax({
            url: "ajax.php",
            data: { parent : parent },
            type: "POST",
            success: success: function(response){
                $(".sub_cat").html(response);
            },
            error: function() {
                alert("Error, possible missing file.");
            }
            }); //End of ajax
        alert(parent);
        } //End of getval

        }) //End selectMenu
      .selectmenu( "menuWidget" )
        .addClass( "overflow" );

    $( "#sub_cats" )
       .selectmenu()
       .selectmenu( "menuWidget" )
       .addClass( "overflow" );

     var categories = $('#categories');
     var subcats = $('#sub_cats');       
});
</script> 

这是将填充的 HTML:

<fieldset>
<div class=sub_cat>

</div>
</fieldset>

这是 ajax.php:

<?php
$parent = $_POST['parent'];
$subcats = get_categories("child_of=$parent");

$parent =   "<label for="sub_cats">Select a Sub-category</label>
            <select name="sub_cats" id="sub_cats">
            <option selected="selected">Pick a Sub-Category</option>" .
            foreach($subcats as $subcat) {
            "<option value=" echo $subcat->name ">" . echo $subcat->name . "</option>"
            } .
            "</select>"
?>

菜单按其应有的方式出现，警报出现，并且在做出选择时始终将父类别发送到 ajax。但成功警报从未被触及，我不知道应该在 ajax.php 文件中放入什么。我的猜测是使用该文件来获取 php 中的子猫，然后以 json 格式发送它，但我不知道如何。

绝对感谢任何帮助，我已经为此苦苦挣扎了一段时间。

我已经尝试了下面的解决方案，但我从未从 ajax.php 中得到任何代码或值及其答案。这就是它停止的地方。我也不知道如何用新项目填充下一个选择框。假装我是一个 super 无知的程序员，对这些结构一无所知，并从这个 Angular 进行解释，希望这可能会有所帮助。

Answer 1

在 ajax.php 文件中...执行此操作...

$parent = $_POST['parent'];

// Query the subcategories using parent ..

// then loop and create select box ...

然后像下面这样改变ajax成功...并将数据填充到子类别div

success: function(response){
    $(".subcat-div").html(response);
}