PHP Ajax 调用以清除和填充下拉菜单答案

【问题标题】：PHP Ajax call to clear and populate a drop down menuPHP Ajax 调用以清除和填充下拉菜单
【发布时间】：2014-05-24 02:56:54
【问题描述】：

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

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

但是 - 我希望当用户选择不同类型的汽车品牌时，汽车型号的第二个下拉菜单会发生变化。

我知道我可以让 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 ) )

【问题讨论】：

1.让你的 API 变得安静 [i.e.没有POST 到getModels 路由，而是GET 到/models； 2.通过json_encode返回一个json数组，然后在jQuery中对其进行迭代并将<option>s附加到所需的<select>标签上。
我可以举个例子吗 - 附加模型会删除模型选择中已经是选项的模型吗？
追加不会删除任何东西[根据定义]。去试试吧，你现在有所有的关键词可以搜索谷歌:))

标签： javascript php jquery html ajax

【解决方案1】：

首先你需要更新你的选择

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

对于模型

<select name = "model" id="models" onchange="showForm()">

</select>




<script type="text/javascript">

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

        $.ajax({
            type: "POST",
            url: "/project/main/getModels",
            data: { 'carTypeId': v  },
            dataType:'json',
            success: function(msg){
                html = '';
              if(msg.model){
                for(i=0;i<msg.model.length;i++){
                   html += '<option value="'+msg.model[i][model_id]+'">'+ msg.model[i][model_name] +'</option>';
                }

               $('select[\'name=model\']').html(html);
             }

            }
        });
    }
$('select[name=\'car\']').trigger('change');
</script>

现在在你的 php 代码上，我认为你也应该推送一个模型 id .. 像

  <?php
   //$results is database result you fetched 
  $models = array(); 
  foreach($results as $row){  
     $models[] = array(
       'model_id' => $row['modelId'],
       'model_name' => $row['modelName']
     );
    }
    echo json_encode($models);

  ?>

【讨论】：

感谢您的建议 - 但是我将返回 msg.model 的格式是什么？是json编码的数据吗？
thankyou 更有意义 - 我会尝试这个并在测试后将您标记为正确谢谢！
OP 想要追加到模型下拉列表。
^ true - 这是 PHP 端的最佳示例
您的下拉值不是被替换而不是附加吗？你提到你想附加我想的现有值？

【解决方案2】：

以这种格式返回你的 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);

    }
});

未测试。希望这会有所帮助。

【讨论】：

【解决方案3】：

在/project/main/getModels 中使用<option> 迭代数组以形成代码，然后使用jquery .html() 替换html

例子

如果 ajax 正在返回，请说。

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

然后成功地做到这一点

$('#models').append(msg)

【讨论】：

嗨，我知道这听起来很愚蠢 - 但我对网络编程完全陌生 - 我将如何从 php 端一个一个地返回每个选项，这将是我的数组的一个 foreach，它回显“选项值 = 'x'>".model['modelName'].
不用一一返回。在 foreach 中，您必须完全构建一个选项。.. foreach($array as $row){ $str .=""} 在 php 文件中。
然后简单地回显 $str?