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>

但是-我希望當用戶選擇其他類型的汽車品牌時，隨着汽車型號的第二個下拉菜單發生變化。

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

    }
});

未經測試。希望這會有所幫助。

Answer 2

在/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)

Answer 3

首先，您需要像這樣更新您的選擇

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

  ?>