The dynamic dependent select box<\/b> is used to auto-populate the dependent data in the dropdown list. Based on the drop-down selection, the dependent data are retrieved from the database and displayed in the next select box. Generally, the dynamic dependent select box is used to implement Country-State-City dependent dropdown<\/b> functionality. You can easily implement dynamic dependent dropdown without page refresh using Ajax in PHP.<\/p>\n
Dynamic dependent dropdown<\/b> is very useful to fetch dynamic relational data from the database and list them in multiple select boxes. In this tutorial, we will show you how to implement a relational dropdown of country-state-city using jQuery, Ajax, PHP, and MySQL. In the dependent select box, the state is related to the country, and the city is related to the state. Based on the change of country, the respective state & city are fetched from the database without reloading the page using jQuery, Ajax, PHP, and MySQL.<\/p>\n
In this example script, we will integrate country, state, and city dependent dropdown select boxes with PHP and MySQL.<\/p>\n
Before getting started to build a dynamic dependent dropdown list with PHP<\/b> and MySQL, take a look at the file structure.<\/p>\n To store the data of the country, state, and city, three tables are required in the database. Also, there would be a relationship between countries, states, and cities table. The states table has a relation with the countries table and the cities table has a relation with the states table.<\/p>\n The following SQL creates a The following SQL creates a The following SQL creates a The dbConfig.php file is used to connect the database using PHP and MySQL. Specify the database host ( HTML & PHP Code:<\/b>dynamic_dependent_dropdown_with_php\/<\/span>\r\n\u251c\u2500\u2500 dbConfig.php\r\n\u251c\u2500\u2500 index.php\r\n\u251c\u2500\u2500 ajaxData.php\r\n\u2514\u2500\u2500 js\/<\/span>\r\n \u2514\u2500\u2500 jquery.min.js\r\n<\/pre>\nCreate Database Tables<\/h2>\n
countries<\/code> table in the MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `countries`<\/span> (\r\n `country_id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `country_name`<\/span> varchar<\/span>(50<\/span>) CHARACTER<\/span> SET<\/span> utf8 NOT<\/span> NULL<\/span>,\r\n `status`<\/span> tinyint(1<\/span>) NOT<\/span> NULL<\/span> DEFAULT<\/span> '1'<\/span> COMMENT<\/span> '1=Active | 0=Inactive'<\/span>,\r\n PRIMARY KEY<\/span> (`country_id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\nstates<\/code> table with parent country_id<\/code> field in the MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `states`<\/span> (\r\n `state_id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `country_id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span>,\r\n `state_name`<\/span> varchar<\/span>(50<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `status`<\/span> tinyint(1<\/span>) NOT<\/span> NULL<\/span> DEFAULT<\/span> '1'<\/span> COMMENT<\/span> '1=Active | 0=Inactive'<\/span>,\r\n PRIMARY KEY<\/span> (`state_id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\ncities<\/code> table with parent state_id<\/code> field in the MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `cities`<\/span> (\r\n `city_id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `state_id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span>,\r\n `city_name`<\/span> varchar<\/span>(50<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `status`<\/span> tinyint(1<\/span>) NOT<\/span> NULL<\/span> DEFAULT<\/span> '1'<\/span> COMMENT<\/span> '1=Active | 0=Inactive'<\/span>,\r\n PRIMARY KEY<\/span> (`city_id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\nDatabase Configuration (dbConfig.php)<\/h2>\n
$dbHost<\/code>), username ($dbUsername<\/code>), password ($dbPassword<\/code>), and name ($dbName<\/code>) as per your database credentials.<\/p>\n<?php
<\/span>\/\/ Database configuration
<\/span>$dbHost <\/span>= <\/span>\"localhost\"<\/span>;
<\/span>$dbUsername <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbPassword <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbName <\/span>= <\/span>\"codexworld\"<\/span>;
<\/span>\/\/ Create database connection
<\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>, <\/span>$dbUsername<\/span>, <\/span>$dbPassword<\/span>, <\/span>$dbName<\/span>);
<\/span>\/\/ Check connection
<\/span>if (<\/span>$db<\/span>-><\/span>connect_error<\/span>) {
die(<\/span>\"Connection failed: \" <\/span>. <\/span>$db<\/span>-><\/span>connect_error<\/span>);
}<\/span><\/pre>\nDynamic Dependent Select Boxes (index.php)<\/h2>\n
\nInitially, all the country data is fetched from the database and listed in the country dropdown. Once a value is selected in the country dropdown, the respective data is listed in the state and city dropdown.<\/p>\n<?php
<\/span>\/\/ Include the database config file
<\/span>include_once <\/span>'dbConfig.php'<\/span>;
<\/span>\/\/ Fetch all the country data
<\/span>$query <\/span>= <\/span>\"SELECT * FROM countries WHERE status = 1 ORDER BY country_name ASC\"<\/span>;
<\/span>$result <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>$query<\/span>);
<\/span>?><\/span>\r\n\r\n<!-- Country dropdown --><\/span>\r\n<select<\/span> id<\/span>=\"country\"<\/span>><\/span>\r\n <option<\/span> value<\/span>=\"\"<\/span>><\/span>Select Country<\/option<\/span>><\/span>\r\n <?php
<\/span>if(<\/span>$result<\/span>-><\/span>num_rows <\/span>> <\/span>0<\/span>){
while(<\/span>$row <\/span>= <\/span>$result<\/span>-><\/span>fetch_assoc<\/span>()){
echo <\/span>'<option value=\"'<\/span>.<\/span>$row<\/span>[<\/span>'country_id'<\/span>].<\/span>'\">'<\/span>.<\/span>$row<\/span>[<\/span>'country_name'<\/span>].<\/span>'<\/option>'<\/span>;
}
}else{
echo <\/span>'<option value=\"\">Country not available<\/option>'<\/span>;
}
<\/span>?><\/span>\r\n<\/select<\/span>><\/span>\r\n\r\n<!-- State dropdown --><\/span>\r\n<select<\/span> id<\/span>=\"state\"<\/span>><\/span>\r\n <option<\/span> value<\/span>=\"\"<\/span>><\/span>Select country first<\/option<\/span>><\/span>\r\n<\/select<\/span>><\/span>\r\n\r\n<!-- City dropdown --><\/span>\r\n<select<\/span> id<\/span>=\"city\"<\/span>><\/span>\r\n <option<\/span> value<\/span>=\"\"<\/span>><\/span>Select state first