jQuery Dependent DropDown List – States and Districts Using PHP-PDO


- Advertisement -

In this tutorial, we are going to learn how to change the district dropdown list option based on the selected state name using PHP-PDO.

In this example, we have two dropdowns for listing states and districts. On changing states drop-down values, the corresponding district dropdown values will be loaded dynamically using jQuery AJAX.

File structure for this tutorial

config.php — Database connection file.

index.php — Main file having drop down

get_district.php — used to retrieve the district based on the selected state name.

MySQL Database structure for this tutorial

In this tutorial two MySQL Database table is used.

  • state
  • district

state table structure

district table structure

Step 1: Create a database connection file (config.php)

Step2: Create a HTML form with two fields . One is for state and another one is for district.

Step3: Getting States using jQuery AJAX

This script contains a function that will be called on changing state dropdown values. It will send AJAX request to a PHP page to get corresponding district dropdown options.

Step 4: Read the district table using PHP based on the selected state name.

This PHP code connects the database to retrieve district table values based on the state id passed by jQuery AJAX call.

How to run this script

1.Download the zip file

2.Extract the file and copy statedistdropdown-pdo folder

3.Paste inside root directory(for xampp xampp/htdocs, for wamp wamp/www, for lamp var/www/html)

4.Open PHPMyAdmin (http://localhost/phpmyadmin)

5.Create a database with name demos

6.Import regdb.sql file(given inside the zip package )

7.Run the script http://localhost/statedistdropdown-pdo

Download Full source Code (jQuery Dependent Dropdown List – States and Districts Using PHP- PDO)
Size: 33.7 KB
Version: V 1.0

- Advertisement -

Leave A Reply

Your email address will not be published.