javascript - PHP Ajax 调用以清除并填充下拉菜单

Question

大家好，我在网页上有一个表单，例如包含如下所示的汽车列表:

 <select name = "car" id="Cars" onchange="showForm()">
            <option value="0">Toyota</option>
            <option value="1">Audi</option>
            <option value="2">Suzuki</option>
</select>

在此下拉菜单下，我还有另一个模型下拉菜单:

<select id="models" onchange="showForm()">
            <option value="0">R8</option>
            <option value="1">Quattro</option>
            <option value="2">A6 hatchback</option>
</select>

但是 - 我希望当用户选择不同类型的汽车品牌时，第二个下拉列表中的汽车型号能够更改。

我知道我可以使选择具有 onchange 方法，并且我可以进行 ajax 调用，这将创建一个新的模型数组，但是 - 我不知道如何从下拉列表中获取现有模型并填充带有新选项的下拉菜单。我正在使用 PHP。例如 onchange 脚本:

<script type="text/javascript">

    function getModels(obj){
        var carTypeId = $(obj).attr('value');

        $.ajax({
            type: "POST",
            url: "/project/main/getModels",
            data: { 'carTypeId': carTypeId  },
            success: function(msg){
               //I don't know how to put the results back into the select box?
            }
        });
    }

</script>

任何想法将不胜感激 - 我的 php 结果将是一个数组数组，如下所示:

[models] => Array ( [0] => Array ( [modelName] => R8 ) [1] => Array ( [modelName] => A6 hatchback ) ) 

Answer 1

以这种格式返回你的 php 结果

<option value="0">R8</option>
<option value="1">Quattro</option>
<option value="2">A6 hatchback</option>

成功的秘诀:

$.ajax({
    type: "POST",
    url: "/project/main/getModels",
    data: { 'carTypeId': carTypeId  },
    success: function(msg){

    $('#models').html('');
    $('#models').html(msg);

    }
});

未经测试。希望这有帮助。