Select Box Dynamic Dependent DropDown List | PHP MYSQL AJAX

Last Updated on

WHAT THIS BLOG ACTUALLY INCLUDES

In this blog I am creating three dynamic and dependent select boxes.These select boxes option list are dependent on each other.

If the user selects any option from 1st list then the second list gets populated.Likewise, when the user selects the option from the second box then third select box options gets populated from the database.

SELECT BOXES DESCRIPTION

  1. First Select Box – It will contain the list of company(For Example – Samsung).
  2. Second Select Box – It will contain the list of items manufactured by the companies listed in the first box(For Example – Samsung’s Mobile,Washing Machine,Air Purifier etc).
  3. Third Select Box – It will contain the list of model names that comes for each item listed in second box(For Example – If user selects Mobile in second list then this list will show all the models of the mobile phone like Samsung Galaxy Note10).

These boxes will show the dynamic options list which I am fetching from database.Hence I created three tables in the database

DATABASE STRUCTURE

1.Table with the name – Company :-  This table will have two columns – id,company_name.Below are the queries for creating and inserting data in the table.

2. Table with the name – Item :- This table will have three columns – id,item_name,company_id.To make item’s select box dependent on company’s select box, company_id column will work as a foreign key and will be same as the id in the Company table.

3. Table with the name – Model :- This table will also contain three columns – id,model_name,item_id.To make model’s select box dependent on item’s select box, item_id column will work as a foreign key and will be same as the id in the Item table.

FILE STRUCTURE

Three files are used for implementing dynamic select box logic.

  1. config.php – for creating database connection.
  2. select.php – for creating three select boxes and making ajax request for populating the options in the box.
  3. ajax.php – for responding to all the request received from select.php  by querying the database and fetching the table data and sending it back to select.php

CONFIG.PHP

SELECT.PHP

  • In the Head Section of this file I am using CDN for JQUERY and BootStrap(for designing purpose).
  • In the Body Section I am using bootstrap classes(container,jumbotron,form-group,custom-select) for a better UI with three select menus.
  • First select menu contains  onchange event which will trigger and call getItemList() function when user will select any option from 1st menu. getItemList()  function will populate the 2nd list.Likewise, when user selects any option from 2nd menu, onchange event triggers and calls getModellist() function which populates the 3rd select box list.
  • In the Script Section – first part is used to populate the first select box list as soon as the page loads and this is done using AJAX request.
  • AJAX request calls ajax.php file for querying the database and fetching the companies name from Company Table.
  • In ajax.php, after querying the database the query result will be in array format as it will contain multiple company id and company name. But ajax request does not accept array as response so we need to convert array into JSON format before sending it back to select.php.

IMPORTANT – If you are sending array as a response to AJAX, it will process the response as a string and not as an array so it better to send JSON as a response.

  • AJAX request contains a parameter called dataType and it should be set to JSON to accept the JSON response from ajax.php file.For more details on AJAX parameters refer to https://api.jquery.com/jQuery.ajax/
  •  AJAX request parse the JSON response and convert it into an array. Hence forEach() function is used to access each array element and create options to populate the list in company select box.
  • Function getItemList() and getModelList() are also using the AJAX request in the same way which is discussed above.

AJAX.PHP

 

Leave a Reply

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