Ajax form, 2 drop downs with external source

问题:

is there a way once I select from a drop down list on a form that it will select all models from the first dropdown in a second drop down

Here is my code

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

So if I select Acura, the second drop down will show a list of all models ie MDX RDX RL TL TSX ZDX

If possible, how would I have both dropdowns load from different files. {php or xml or whatever else is possible}

Thanks for your time!

回答1:

Here's some rough code on how to accomplish this.

On page load, populate 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 ); 
        }); 
    }); 
}); 

So in your file2.php you can check the $_GET array for the make variable passed in, then you can send back all the options for that model. You could also send back json instead of html but this gives you a rough idea of how to do it and i think it's best to keep it simple at first.