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

  ?>

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

3 个答案: