Building Dynamic Select Lists with PHP and jQuery

CREATE TABLE `cars` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `make` varchar(255) NOT NULL,
  `model` varchar(255) NOT NULL,
  `year` int(4) NOT NULL,
  PRIMARY KEY (`id`)
);

Next, we will insert some sample data into the cars table:

INSERT INTO `cars` (`make`, `model`, `year`) VALUES
('Toyota', 'Corolla', 2020),
('Toyota', 'Camry', 2021),
('Honda', 'Civic', 2020),
('Honda', 'Accord', 2021),
('Ford', 'F-150', 2020),
('Ford', 'Mustang', 2021);

Now, we will create a PHP script that will retrieve the car data from the database and output it in JSON format:

<?php
// Connect to the database
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Retrieve the car data from the database
$sql = "SELECT DISTINCT make FROM cars";
$result = $conn->query($sql);

$cars = array();
while ($row = $result->fetch_assoc()) {
    $make = $row['make'];
    $sql2 = "SELECT DISTINCT model, year FROM cars WHERE make='$make'";
    $result2 = $conn->query($sql2);

    $models = array();
    while ($row2 = $result2->fetch_assoc()) {
        $models[] = array(
            'model' => $row2['model'],
            'year' => $row2['year']
        );
    }

    $cars[] = array(
        'make' => $make,
        'models' => $models
    );
}

// Output the car data in JSON format
header('Content-Type: application/json');
echo json_encode($cars);

$conn->close();
?>

Next, we will create an HTML form that will display the dynamic select list to the user:

<form>
    <label for="make">Make:</label>
    <select id="make" name="make"></select>

    <label for="model">Model:</label>
    <select id="model" name="model"></select>

    <label for="year">Year:</label>
    <select id="year" name="year"></select>
</form>

Finally, we will add jQuery functionality to the HTML form to populate the dynamic select list:

$(document).ready(function() {
    // Populate the make select element
    $.ajax({
        url: 'get_cars.php',
        dataType: 'json',
        success: function(data) {
            var makeSelect = $('#make');
            makeSelect.append($('<option>').text('Select Make').attr('value', ''));

            $.each(data, function(index, make) {
                makeSelect.append($('<option>').text(make.make).attr('value', make.make));
            });
        }
    });

    // Populate the model select element when the make select element changes
    $('#make').change(function() {
        var selectedMake = $(this).val();
        var modelSelect = $('#model');
       
// Reset the model and year select elements
modelSelect.empty();
$('#year').empty();

    if (selectedMake === '') {
        // If the user selects the "Select Make" option, reset the model and year select elements
        modelSelect.append($('<option>').text('Select Model').attr('value', ''));
    } else {
        // Otherwise, populate the model select element with the models for the selected make
        $.each(data, function(index, make) {
            if (make.make === selectedMake) {
                modelSelect.append($('<option>').text('Select Model').attr('value', ''));
                $.each(make.models, function(index, model) {
                    modelSelect.append($('<option>').text(model.model + ' (' + model.year + ')').attr('value', model.model + ',' + model.year));
                });
            }
        });
    }
});

// Populate the year select element when the model select element changes
$('#model').change(function() {
    var selectedModel = $(this).val();

    // Reset the year select element
    var yearSelect = $('#year');
    yearSelect.empty();

    if (selectedModel === '') {
        // If the user selects the "Select Model" option, reset the year select element
        yearSelect.append($('<option>').text('Select Year').attr('value', ''));
    } else {
        // Otherwise, populate the year select element with the years for the selected model
        var modelYear = selectedModel.split(',');
        var selectedMake = $('#make').val();

        $.each(data, function(index, make) {
            if (make.make === selectedMake) {
                $.each(make.models, function(index, model) {
                    if (model.model === modelYear[0] && model.year === parseInt(modelYear[1])) {
                        yearSelect.append($('<option>').text(model.year).attr('value', model.year));
                    }
                });
            }
        });
    }
});

});

Let's take a closer look at the jQuery code:

1. We use jQuery's `$(document).ready()` function to ensure that the code inside it is executed only when the DOM is ready.
2. We use the `$.ajax()` function to retrieve the car data from the PHP script in JSON format.
3. We use the `success` callback function to populate the make select element with the data we retrieved from the server.
4. We use jQuery's `change()` function to detect when the user changes the selected make.
5. If the user selects the "Select Make" option, we reset the model and year select elements.
6. Otherwise, we populate the model select element with the models for the selected make.
7. We use jQuery's `change()` function again to detect when the user changes the selected model.
8. If the user selects the "Select Model" option, we reset the year select element.
9. Otherwise, we populate the year select element with the years for the selected model.

And there you have it! With just a little bit of PHP and jQuery, we were able to create a dynamic select list that allows the user to select a car make, model, and year.

9. Conclusion

In this blog post, we learned how to create a dynamic select list using PHP and jQuery. We started by explaining what a dynamic select list is and why it’s useful, and then we outlined the steps required to create one.

We then provided a step-by-step guide on how to implement a dynamic select list using PHP and jQuery, including code samples and explanations of each step. We showed how to use PHP to retrieve the necessary data from a database and how to use jQuery to dynamically update the select elements based on user input.

By the end of this blog post, you should have a good understanding of how to create a dynamic select list using PHP and jQuery, and you should be able to implement one in your own projects. Dynamic select lists can be a powerful tool for creating user-friendly interfaces and improving the user experience of your website or web application. So why not give it a try in your next project?