Dynamic dependent select box using jQuery, Ajax, and PHP

Today we’ll explain to you how to create a dynamic dependent select box using jQuery, Ajax, and PHP. Typically, this functionality is used to automatically add dependent data to a dropdown list.

This is a very common functionality that is used in the product selection as per category in the shopping cart or student course selection based on the class. According to the drop-down selection, the dependent data is retrieved from the database and displayed in the next drop-down.

Here we will take an example for country, state, city dropdown to implement a dynamic select box using jQuery, Ajax and PHP. Initially, all countries retrieve from the database and listed in the dropdown. When we select the country, the respective states will be fetched from the database and listed in the state dropdown. Similarly, when the state selects, the respective cities will be fetched from the database and listed in the city dropdown.

Your user interface will look like below.

Output - Dynamic dependent select box using jQuery, Ajax, and PHP - Clue Mediator
Output – Dynamic dependent select box using jQuery, Ajax, and PHP – Clue Mediator

Steps to implement the dynamic dependent select box

  1. Create tables in the database
  2. Database connection
  3. Create HTML Select box
  4. Add jQuery Ajax code
  5. Create PHP action file
  6. Output

Let’s start with an example for cascading jQuery AJAX dependent dropdown in the PHP. Refer the following project structure.

File Structure

  • dynamic-dependent-select-box
    • action.php
    • db_config.php
    • index.php

1. Create tables in the database

First of all, we will create three tables in the database for storing country, state and city data.

Table: countries

This table will have two columns – id and country_name. To create a countries table and insert the sample data, run the following sql query.

Table: states

This table will have three columns – id, country_id and state_name. To make the state select box dependent on the country’s select box, the country_id column will work as a foreign key and will be the same as the id in the countries table.

Run the following sql query to create a states table and insert the sample data into the table.

Table: cities

This table will also contain three columns – id, state_id and city_name. Same as the states table, state_id will work as a foreign key for this table.

Run the following command to create a cities table and insert the sample data.

Country State City relationship with ERD

This ERD shows the relationship between the countries, states and cities tables

ERD - Clue Mediator
ERD – Clue Mediator

2. Database connection

We have to create a file for database connection named db_config.php.

db_config.php

3. Create HTML select box

Now, we will create a file named index.php where three dropdowns will be shown.

index.php

If you noticed that we have included the jQuery and Bootstrap library in the HTML code. The jQuery will be used to work with Ajax call and Bootstrap library will be used for the styling.

4. Add jQuery Ajax code

Using Ajax we will fetch data (state and city) from the database without reloading the page.

Let’s add the below code in the index.php file that sends country_id and state_id to the server-side script (action.php) via Ajax request when dropdown option value is selected. Get response from the action.php file and display the HTML data to respective dropdown list.

5. Create PHP action file

Now, create a PHP file named action.php file. The Ajax request is sent to this PHP file and then retrieves the data such as state list or city list from the database based on the request id (country_id or state_id).

action.php

6. Output

Run the project and check the output in the browser.

I hope you find this article is helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

Github Repository
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

Leave a Reply

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