Autotrader type Select Boxes?

[calabrese]

Hey there folks, i've been working on re-designing and coding a car listing site and have run in to a small (and hopefully easy) wall.

 

My goal seems simple: populate 2 select boxes with XML car data and allow a user to select the Make and Model in each box with the Model box updating after a car Make is selected.  But for some reason I have hit a mental road block and cannot get around it.

 

My code for the 'test.php' is as follows...

 

<script language="JavaScript">

function autoSubmit()
{
    var formObject = document.forms['carSelect'];
    formObject.submit();
}

</script>

<?php 

$xmlFileData = file_get_contents("./xml/vehicle_data.xml");
$xmlData = new SimpleXMLElement($xmlFileData);
$vehicle = $_GET['car'];
$model = $_GET['model'];

print("<form name='carSelect' method='get'>");

print("<select name='car' onChange='autoSubmit();'>");
foreach($xmlData->car as $car) {
print("<option>". $car->make ."</option>");
}
print("</select>");


print("<select name='model' onChange='autoSubmit();'>");
foreach($xmlData->car->model as $model) {
print("<option>". $model ."</option>");
}
print("</select>");

print("</form>");

print("<br />Car Selected: ". $vehicle);
print("<br />Car Model   : ". $model);

?>

 

A sample of the XML file I am using is as follows...

 

<?xml version="1.0"?>
<vehicles>
<car>
  <make>Any</make>
    <model>Any</model>
</car>
<car>
  <make>Acura</make>
    <model>Any Model</model>
    <model>2.2CL</model>
    <model>2.3CL</model>
    <model>2.5TL</model>
    <model>3.0CL</model>
    <model>3.2CL</model>
    <model>3.2TL</model>
    <model>3.5RL</model>
    <model>Integra</model>
    <model>Legend</model>
    <model>MDX</model>
    <model>NSX</model>
    <model>RDX</model>
    <model>RL</model>
    <model>RSX</model>
    <model>SLX</model>
    <model>TL</model>
    <model>TSX</model>
    <model>Vigor</model>
</car>
<car>
  <make>Alfa Romeo</make>
    <model>Any Model</model>
    <model>164</model>
    <model>GTV</model>
    <model>GTV-6</model>
    <model>Milano</model>
    <model>Spider</model>
    <model>Spider Veloce</model>
</car>
</vehicles>

 

And what i'm aiming for is something similar to this...

 

http://www.autotrader.com/fyc/index.jsp?bkms=

 

...in the Make and Model section.

 

Any help in the right direction would be most appreciated.  Thanks in advance!

[premiso]

You would either need to have all the makes defined in the javascript, then onchange, populate the makes based on the model, or do an AJAX call back and populate the data that way.

 

The ajax is the preferred method and for easy ajax, google jQuery, it makes AJAX 10x easier.

[calabrese]

You would either need to have all the makes defined in the javascript, then onchange, populate the makes based on the model, or do an AJAX call back and populate the data that way.

 

The ajax is the preferred method and for easy ajax, google jQuery, it makes AJAX 10x easier.

 

Thanks for the information!  Would you perhaps have a link to a tutorial or example of how I could get it to work?

[premiso]

http://www.chazzuka.com/blog/?p=206

 

http://code.google.com/p/jqueryselectcombo/

 

http://www.google.com/search?hl=en&sa=X&oi=spell&resnum=0&ct=result&cd=1&q=jquery+onchange+populate+dropdown&spell=1