Dynamic Dependent Select Box using jQuery and Ajax

Demo Download

We often see dynamic dependent select box in website, which are part of web form. Today i will share how to use dynamic dependent select box using jQuery and ajax. I will use an example of country and city, when you will select any country, its cities will be available in the below select box without refresh or reload the page this is the power of Ajax.

Steps to Create Dynamic Dependent Select Box using jQuery and Ajax

  1. Create a Database
  2. Create Two Tables of County and City and Insert Data in Both Table
  3. Create a Database Connection File
  4. Create Index File Which Using JQuery and Ajax
  5. Create PHP Action File

1. Create a Database

Create a database with name parent_child_select. For this purpose run the following query in MySQL.

2. Create Two Tables of County and City and Insert Data in Both Table

Create two tables with name county and city and insert sample data  in database by using the following queries. For your ease i have also attached the SQL file in download file just import this file in SQL and it will create tables with sample data.

3. Create a Database Connection File

Create a file with name db.php and copy paste the below code in that file. Make sure that you changed your database, username, password and host.

4. Create Index File Which Using JQuery and Ajax

Create a file with name index.php and copy paste the below code in this file. Note that I  have added the jQuery and Ajax script in the footer of this file.

5. Create PHP Action File

Create a file with name ajax.php and paste the below script there.

Demo Download

If you found this tutorial helpful so share it with your friends, developer groups and leave your comment.

Article By
Javed Ur Rehman is a passionate blogger and web developer, he loves to share web development tutorials and blogging tips. He usually writes about HTML, CSS, JavaScript, Jquery, Ajax, PHP and MySQL.

6 Comments

    1. This is not easy as you can not find data easily all list of streets of all countries, however you will need to create another table for street with fields name something like this street_id, street_name and city_id.
      And on ajax part also check if city is selected populate all street values in dependent field same as we did for city. Hope this help you.

  1. Firstly, thank you very much for this tutorial, It is a really good job.
    Could you extend this solution to 3 steps?

    1. Step 3 is only database connection, as we always need to create database connection if we want using data from database, you can search about it in details in Google if you do not have any idea about database and its connection.

Leave a Reply

Your email address will not be published. Required fields are marked *