Using a mysql data base to populate a second drop down box automatically based off of first drop down box

Question

I need to have a selection box display options that are based off of the selection from the drop down box right above it. Once the user selects the Car Make, then I want the Car Models of the car make to be options to be selected.

I have been able to get the car makes options to be displayed from my mysql data base, but now I need the car models of only that make. My data base has two collumns, one for the Make and one for the Model.

The top section of PHP is the way i get the make, and the bottom is my attempt to get the model, but it displays hundreds of models, instead of just the few I want. I heard that AJAX or javascript can automatically upload the results, which would be nice. Any help is great. thanks!

</div>

<?php
    mysql_connect('localhost', '*****', '******');
    mysql_select_db('*************');
    $sql = "SELECT Make FROM CarMakes";
    $result = mysql_query($sql);
    echo "<select name='carmake3'>";
    while ($row = mysql_fetch_array($result)) {
        echo "<option value='" . $row['Make'] . "'>" . $row['Make'] . "</option>";
    }
    echo "</select>";
?>
<?php
    mysql_connect('localhost', '******', '**********');
    mysql_select_db('*************');
    $sql = "SELECT Model FROM myTable";
    $result = mysql_query($sql);
    echo "<select class='modelbox' name='carmodel3'>";
    while ($row = mysql_fetch_array($result)) {
        echo "<option value='" . $row['Model'] . "'>" . $row['Model'] . "</option>";
    }
    echo "</select>";
?>
<input type="text" maxlength="4" name="car3year" placeholder="year" class="WriteInBox"/>

<input type="text" maxlength="6" name="car3miles" placeholder="miles" class="WriteInBox"/>

</div>

Answer 1

$sql = "SELECT Model FROM myTable";

This clearly is giving you the results you are asking for. It will select all models.

Your sql should look like

$sql = "SELECT Model FROM myTable WHERE Make='Make'";

The where limits you to retrieve only models associated with the specific Make you have selected.

To do it with AJAX, are you using jQuery? Straight JavaScript with an Ajax call? Please provide more information for answering that part of your question.

Answer 2

This probably isn't the best way to do this, but when I have had to do things like this before, I usually use the php to populate some javascript variables in my header and then use javascript to create the selects. Also, I'm assuming that there is something in your database that maps certain models to certain makes of vehicles.

<script>
var makes = new Array();
var models = new Array();
<?php
$sql = "SELECT Make FROM CarMakes";
$result = mysql_query($sql);
while ($row = mysql_fetch_assoc($result)) {
?>
    makes[] = <?php echo json_encode($row['Make']); ?>;
<?php
}
$sql = "SELECT Make FROM CarMakes";
$result = mysql_query($sql);
while ($row = mysql_fetch_assoc($result)) {
?>
    models[] = <?php echo json_encode($row['Model']); ?>;
<?php
}
?>
</script>

From here, you can create the selects and populate the options of the first one with the elements of the makes array. Then add an onChange event to the first select to populate the second select.

EDIT For select creation:

<select id="make-select" onChange="updateModels()">
</select>
<select id="model-select">
</select>
<script>
$(function() {
    $.each(makes, function (index, value) {
        $(#make-select).append($('<option>') {
            value: value,
            text: value
        });
    });
}
</script>

Then just create a function that called updateModels that will update model-select based on the selected value of make-select . Again, you'll need somehting that associates models with makes in your database, and then you might have to make the makes variable an object instead of just an array.

var models = new Object()
<?php
    $sql = "SELECT Model-Make, Model FROM CarMakes";
    ...
    models.make = <?php echo json_encode($row['Model-Make']); ?>;
    models.model = <?php echo json_encode($row['Model']); ?>;
    ...
?>