Select Box Dynamic Dependent DropDown List | PHP MYSQL AJAX


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.


  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


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.


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



  • 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
  •  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.



2 thoughts on “Select Box Dynamic Dependent DropDown List | PHP MYSQL AJAX

  1. martin

    very nice job but i have one question how can we make it in case there is no second or third level ( item, model) to avoid showing the dropdown for it. i mean did not show the secound or third drowp dwon select
    thx in advance

    1. admin Post author

      Hi Martin, Just remove the itemlist and modellist part of code from select.php and ajax.php files and then you will get only one select menu with dynamic items.


Leave a Reply

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