How to Create Dynamic Country-State Dropdown in JavaScript & PHP

Want to build a dynamic form that updates based on user choices — like selecting a country and then seeing only the relevant states and districts? You’re in the right place.

In this guide, we’ll walk through creating dependent dropdowns using PHP, MySQL, jQuery, and a little HTML. This is a great feature for any form where location data is involved — especially in countries like India, where the administrative structure includes states and districts.

What We’re Building:

We’ll create three dropdown menus:

Country (e.g., India)
State (e.g., Maharashtra, Karnataka)
District (e.g., Pune, Mumbai, Bangalore)

When the user selects a country, only the related states are shown. When they pick a state, the corresponding districts are loaded dynamically.

Step 1: Create the Database and Tables

Let’s start by setting up the database with three simple tables.

1.1 Create the Database

CREATE DATABASE location_demo;
USE location_demo;

1.2 Create the Tables

-- Table for countries
CREATE TABLE countries (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100) NOT NULL
);

-- Table for states
CREATE TABLE states (
  id INT AUTO_INCREMENT PRIMARY KEY,
  country_id INT,
  name VARCHAR(100) NOT NULL,
  FOREIGN KEY (country_id) REFERENCES countries(id)
);

-- Table for districts
CREATE TABLE districts (
  id INT AUTO_INCREMENT PRIMARY KEY,
  state_id INT,
  name VARCHAR(100) NOT NULL,
  FOREIGN KEY (state_id) REFERENCES states(id)
);

1.3 Insert Sample Data

INSERT INTO countries (name) VALUES ('India');

-- States of India
INSERT INTO states (country_id, name) VALUES
(1, 'Maharashtra'),
(1, 'Karnataka');

-- Districts
INSERT INTO districts (state_id, name) VALUES
(1, 'Pune'),
(1, 'Mumbai'),
(2, 'Bangalore'),
(2, 'Mysore');

Step 2: Build the HTML Form

This form is where users select country, state, and district. We’ll use jQuery to make real-time changes.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Dependent Dropdowns in PHP</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

  <h2>Select Location</h2>

  <label>Country:</label>
  <select id="country">
    <option value="">--Select Country--</option>
  </select>

  <label>State:</label>
  <select id="state">
    <option value="">--Select State--</option>
  </select>

  <label>District:</label>
  <select id="district">
    <option value="">--Select District--</option>
  </select>

  <script>
    $(document).ready(function() {
      // Load countries
      $.get('get_countries.php', function(data) {
        $('#country').append(data);
      });

      // When a country is selected
      $('#country').change(function() {
        let countryID = $(this).val();
        $('#state').html('<option value="">--Select State--</option>');
        $('#district').html('<option value="">--Select District--</option>');

        if (countryID) {
          $.post('get_states.php', { country_id: countryID }, function(data) {
            $('#state').append(data);
          });
        }
      });

      // When a state is selected
      $('#state').change(function() {
        let stateID = $(this).val();
        $('#district').html('<option value="">--Select District--</option>');

        if (stateID) {
          $.post('get_districts.php', { state_id: stateID }, function(data) {
            $('#district').append(data);
          });
        }
      });
    });
  </script>

</body>
</html>

Step 3: Create the PHP Backend

Each dropdown change triggers a PHP script that talks to the database and sends back a list of options.

get_countries.php

<?php
$conn = new mysqli("localhost", "root", "", "location_demo");

$query = "SELECT * FROM countries";
$result = $conn->query($query);

while ($row = $result->fetch_assoc()) {
    echo "<option value='{$row['id']}'>{$row['name']}</option>";
}
?>

get_states.php

<?php
$conn = new mysqli("localhost", "root", "", "location_demo");
$country_id = $_POST['country_id'];

$query = "SELECT * FROM states WHERE country_id = $country_id";
$result = $conn->query($query);

while ($row = $result->fetch_assoc()) {
    echo "<option value='{$row['id']}'>{$row['name']}</option>";
}
?>

get_districts.php

<?php
$conn = new mysqli("localhost", "root", "", "location_demo");
$state_id = $_POST['state_id'];

$query = "SELECT * FROM districts WHERE state_id = $state_id";
$result = $conn->query($query);

while ($row = $result->fetch_assoc()) {
    echo "<option value='{$row['id']}'>{$row['name']}</option>";
}
?>

Veiw Demo

Download Code