Ajax表单,2个外部源下拉

时间:2011-10-16 22:35:37

标签: php html ajax forms jquery

有一种方法,一旦我从表单上的下拉列表中选择它将从第一个下拉列表中选择所有模型的第二个下拉列表

这是我的代码

        <form>
            <div class="landing_quote_left">
                <table cellpadding="0" cellspacing="8" border="0">
                    <tr>
<td>
                            <label for="ajax_make_id" class="landing_quote_label">Make:</label>
                        </td>
                        <td>
                            <span id="ajax_make_select"><select name="2f_make_id" id="ajax_make_id" style="width: 170px;" onchange="Landing.getMakeFace(this.value);"><option value="999">Select a Make</option><option value="1">Acura</option><option value="2">Audi</option</select></span>

                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="ajax_model_id" class="landing_quote_label">Model:</label>
                        </td>
                        <td>
                            <span id="ajax_model_select">

                                <select name="2f_model_id" id="ajax_model_id" style="width: 170px;" onchange="Landing.getModelFace(this.value);">
                                    <option value="">Loading...</option>
                                </select>
                            </span>
                        </td>
                    </tr>
                </table>
            </div><!-- END landing_quote_left -->
        </form>

因此,如果我选择Acura,第二个下拉列表将显示所有模型的列表,即 MDX RDX RL TL TSX ZDX

如果可能的话,我如何从不同的文件中加载两个下拉列表。 {php或xml或其他任何可能的}

谢谢你的时间!

1 个答案:

答案 0 :(得分:1)

这里有一些关于如何实现这一目标的粗略代码。

在页面加载时,填充dropdown1。

$(function(){
    $.get('file1.php', function(data){
       $('#dropdown1').html( data ); 
    });

    // on change of dropdown1 populate dropdown2 with the respective data 
    $('#dropdown1').change(function(){
        $.get('file2.php',{ make: $(this).val() }, function(data){
            $('#dropdown2').html( data ); 
        }); 
    }); 
}); 

因此,在您的file2.php中,您可以检查传入的$_GET变量的make数组,然后您可以发回该模型的所有选项。你也可以发回json而不是html,但这会让你大致了解如何做到这一点,我认为最好先保持简单。