Three interlinked dropdown listbox using Ajax & PHP

You can also build dependent lists with jQuery. This example uses native JavaScript for the AJAX requests.
Tutorial with Demo on using Three linked dropdown list - JQuery

First dropdown list: Country

The first select box gets its countries from student5. In the live demo, PHP reads the distinct country codes using PDO and escapes each value before putting it in an HTML option. The shared database connection is available through ../include/z_db1.php; the downloadable standalone version uses config.php instead.

<label for="ajax-dd3-country">Country</label>
<select name="country" id="ajax-dd3-country" required>
    <option value="">Select a country</option>
    <?php
    require '../include/z_db1.php';
    $countries = $dbo->query('SELECT DISTINCT country FROM student5 ORDER BY country')->fetchAll(PDO::FETCH_COLUMN);
    foreach ($countries as $item) {
        $safeCountry = htmlspecialchars((string) $item, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
        echo '<option value="' . $safeCountry . '">' . $safeCountry . '</option>';
    }
    ?>
</select>

SQL DISTINCT prevents duplicate country codes from appearing. The dropdown uses three-letter country codes because that is how the sample table stores its data.

Second dropdown list: State

When a country changes, JavaScript clears both dependent lists and requests the states for the selected country. When a state changes, it requests only cities belonging to that country and state. The demo keeps the page open throughout: no form reload is needed to fetch options.

This small function is used by both dependent dropdowns. Each new option is created using Option(text, value), so values returned by the server are treated as text rather than executable HTML.

function replaceOptions(select, values, label) {
    select.replaceChildren(new Option(label, ''));
    for (const value of values) {
        select.add(new Option(value, value));
    }
    select.disabled = values.length === 0;
}

Third dropdown list: City

The city list begins disabled. Once the user chooses a state, the browser sends both the country and state values to ajax-dd3ck.php. The server validates the selection and uses parameterized database queries to return matching cities as JSON.

This shortened example illustrates the city request from inside an asynchronous function. The complete demo additionally cancels outdated requests, shows network errors, resets stale selections and prevents an incomplete form from being submitted.

async function loadCities(countrySelect, stateSelect, citySelect) {
    const params = new URLSearchParams({
        country: countrySelect.value,
        state: stateSelect.value
    });
    const response = await fetch('ajax-dd3ck.php?' + params.toString());
    const result = await response.json();
    if (!response.ok || !result.ok) {
        throw new Error(result.error || 'Unable to load cities');
    }
    replaceOptions(citySelect, result.city, 'Select a city');
}

The response contains a state array, a city array and the selected values. For example, selecting IND and then Tamil Nadu produces a city list that includes Madurai and Coimbatore in the supplied sample data.

What the PHP JSON processor does

The endpoint ajax-dd3ck.php accepts a GET request containing a country code and, optionally, a state. It checks the input types and lengths, confirms that the state belongs to the selected country, then uses PDO prepared statements to select distinct states and matching cities. An invalid selection produces a JSON error instead of an HTML fragment or exposed database error.

When a user changes the country, the existing state and city selections are cleared. The final Submit button is enabled only after all three lists have a selection. The separate ajax-dd3-details.php processor validates and HTML-escapes the submitted values before displaying them; this demonstration does not modify the database.

For the database sample, use the SQL dump inside ajax-dd3.zip on a separate local test database. Do not import sample records into production. Compare the reload-based three-dropdown example if you want to understand the difference between traditional page reloads and asynchronous requests.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: