A dependent dropdown list is a common feature used in web applications where the options in one dropdown depend on the value selected in another dropdown.<\/p>\n
For example, when a user selects a country from the first dropdown, the second dropdown can automatically display the states or regions belonging to that country. This improves the user experience by displaying only relevant options.<\/p>\n
In this guide, we will learn how to create a dynamic dependent dropdown list using HTML, PHP, MySQL, JavaScript, and AJAX<\/strong>. The example uses two dropdown lists: one for countries and another for states.<\/p>\n Note:<\/strong> The original implementation of this article uses PHP’s old Before implementing the dynamic dependent dropdown, make sure you have:<\/p>\n Basic knowledge of HTML.<\/p>\n<\/li>\n Basic knowledge of PHP.<\/p>\n<\/li>\n Basic knowledge of MySQL.<\/p>\n<\/li>\n Basic understanding of JavaScript and AJAX.<\/p>\n<\/li>\n A web server such as Apache or Nginx.<\/p>\n<\/li>\n PHP installed on the server.<\/p>\n<\/li>\n MySQL or MariaDB installed and running.<\/p>\n<\/li>\n A database and user with permission to create and read tables.<\/p>\n<\/li>\n jQuery, if you want to use the AJAX approach shown in this guide.<\/p>\n<\/li>\n<\/ul>\n First, create a database for the application.<\/p>\n\n\n Select the database:<\/p>\n\n\n\n Create a table to store country information:<\/p>\n\n\n\n The Next, create a table to store states or regions:<\/p>\n\n\n\n The This relationship allows us to retrieve states based on the country selected by the user.<\/p>\n\n\n\n Create a file named Using a separate connection file makes the application easier to maintain because the same database connection can be reused by multiple PHP files.<\/p>\n\n\n\n Create a file named Start by including the database connection:<\/p>\n\n\n\n Retrieve the available countries:<\/p>\n\n\n\n Create the dropdown:<\/p>\n\n\n\n The first dropdown displays the available countries.<\/p>\n\n\n\n When the user selects a country, the Include jQuery in the HTML page:<\/p>\n\n\n\n The AJAX request sends the selected The response from Create another file named Include the database connection:<\/p>\n\n\n\n Create another file named Include the database connection:<\/p>\n\n\n\n Check whether a country ID was received:<\/p>\n\n\n\n Use a prepared statement to safely retrieve the states:<\/p>\n\n\n\n Prepared statements help prevent SQL injection and are preferable to directly inserting user input into SQL queries.<\/p>\n\n\n\n Loop through the results and generate the The complete The complete The complete process works as follows:<\/p>\n\n\n\n This process happens without reloading the entire web page.<\/p>\n\n\n\n When implementing dependent dropdowns in a production application, consider the following:<\/p>\n\n\n\n A dynamic dependent dropdown is useful when the options in one field depend on the selection made in another field. Using HTML, PHP, MySQL, JavaScript, and AJAX, developers can dynamically retrieve and display related data without reloading the entire page.<\/p>\n\n\n\n In this example, countries are displayed in the first dropdown, and the states associated with the selected country are dynamically retrieved from MySQL and displayed in the second dropdown.<\/p>\n\n\n\n For modern PHP applications, it is important to replace the deprecated A dependent dropdown list is a dropdown whose available options depend on the value selected in another dropdown.<\/p>\n\n\n\n For example, selecting India<\/strong> in the country dropdown can display only Indian states in the state dropdown.<\/p>\n\n\n\n AJAX allows the application to retrieve the required data from the server without refreshing the entire webpage.<\/p>\n\n\n\n When a user selects a country, only the state information needs to be requested and updated.<\/p>\n\n\n\n Yes. The same functionality can be implemented using JavaScript’s native mysql_*<\/code> functions. These functions were deprecated in PHP 5.5 and removed in PHP 7. The implementation below uses MySQLi<\/strong>, which is suitable for modern PHP environments.<\/p>\n
\nPrerequisites<\/h2>\n
\n
\nImplementation<\/h2>\n
1. Create the Database<\/h3>\n
CREATE DATABASE demo;<\/pre>\n\n\n\n
USE demo;<\/pre>\n\n\n\n
USE demo;<\/pre>\n\n\n\n
\n\n\n\n2. Create the Countries Table<\/h3>\n\n\n\n
CREATE TABLE ls_countries (\n country_id INT NOT NULL AUTO_INCREMENT, \n sortname VARCHAR(3) NOT NULL, \n name VARCHAR(150) NOT NULL, \n phonecode INT NOT NULL, \n status INT NOT NULL, P\n RIMARY KEY (country_id) \n) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;<\/pre>\n\n\n\n
country_id<\/code> column uniquely identifies each country.<\/p>\n\n\n\n
\n\n\n\n3. Create the States Table<\/h3>\n\n\n\n
CREATE TABLE ls_states ( \n state_id INT NOT NULL, \n name VARCHAR(100) NOT NULL, \n country_id INT NOT NULL, \n status INT NOT NULL, \n PRIMARY KEY (state_id), \n FOREIGN KEY (country_id) REFERENCES ls_countries(country_id) \n);<\/pre>\n\n\n\n
country_id<\/code> column connects each state with its corresponding country.<\/p>\n\n\n\n
\n\n\n\n4. Create the Database Connection<\/h3>\n\n\n\n
db.php<\/code> to handle the database connection.<\/p>\n\n\n\n<?php \n\n$host = \"localhost\"; \n$user = \"root\"; \n$password = \"\"; \n$database = \"demo\"; \n\n$conn = new mysqli($host, $user, $password, $database); \nif ($conn->connect_error) {\ndie(\"Database connection failed: \" . $conn->connect_error); \n}<\/pre>\n\n\n\n
\n\n\n\n5. Create the Country Dropdown<\/h3>\n\n\n\n
dropdown-ajax.php<\/code>.<\/p>\n\n\n\n<?php \nrequire_once \"db.php\"; \n?><\/pre>\n\n\n\n
<?php \n\n$sql = \"SELECT country_id, name \n FROM ls_countries \n WHERE status = 1 \n ORDER BY name\"; \n\n$result = $conn->query($sql); \n\n?><\/pre>\n\n\n\n
<select id=\"country\" onchange=\"fetch_select(this.value)\">\n <option value=\"\">Select country<\/option> \n <?php while ($row = $result->fetch_assoc()): ?> \n <option value=\"<?= htmlspecialchars($row['country_id']) ?>\"> \n <?= htmlspecialchars($row['name']) ?>\n <\/option> \n <?php endwhile; ?> \n<\/select> \n\n<select id=\"new_select\"> \n <option value=\"\">Select state<\/option> \n<\/select><\/pre>\n\n\n\n
fetch_select()<\/code> JavaScript function is called.<\/p>\n\n\n\n
\n\n\n\n6. Add AJAX Functionality<\/h3>\n\n\n\n
function fetch_select(countryId) { \n\n if (!countryId) {\n document.getElementById(\"new_select\").innerHTML = \n '<option value=\"\">Select state<\/option>'; \n return; \n } \n $.ajax({ \n type: \"POST\", \n url: \"fetch_data.php\", \n data: { \n get_option: countryId\n }, \n success: function(response) { \n document.getElementById(\"new_select\").innerHTML = response; \n }, \n error: function() { \n document.getElementById(\"new_select\").innerHTML =\n '<option value=\"\">Unable to load states<\/option>'; \n } \n }); \n}<\/pre>\n\n\n\ncountry_id<\/code> to fetch_data.php<\/code>.<\/p>\n\n\n\nfetch_data.php<\/code> is then inserted into the second dropdown.<\/p>\n\n\n\n
\n\n\n\n7. Create the AJAX PHP File<\/h3>\n\n\n\n
fetch_data.php<\/code>.<\/p>\n\n\n\n7. Create the AJAX PHP File<\/h3>\n\n\n\n
fetch_data.php<\/code>.<\/p>\n\n\n\n<?php\n\nrequire_once \"db.php\";<\/pre>\n\n\n\n
if (isset($_POST['get_option'])) {\n\n $countryId = filter_input(\n INPUT_POST,\n 'get_option',\n FILTER_VALIDATE_INT\n );\n\n if (!$countryId) {\n exit;\n }\n\n \/\/ Continue with the database query...\n}<\/pre>\n\n\n\n
\n\n\n\n8. Retrieve States for the Selected Country<\/h3>\n\n\n\n
$stmt = $conn->prepare(\n \"SELECT state_id, name\n FROM ls_states\n WHERE country_id = ? AND status = 1\n ORDER BY name\"\n);\n\n$stmt->bind_param(\"i\", $countryId);\n$stmt->execute();\n\n$result = $stmt->get_result();<\/pre>\n\n\n\n
\n\n\n\n9. Return the States as Dropdown Options<\/h3>\n\n\n\n
<option><\/code> elements:<\/p>\n\n\n\necho '<option value=\"\">Select state<\/option>';\n\nwhile ($row = $result->fetch_assoc()) {\n echo '<option value=\"' .\n htmlspecialchars($row['state_id']) .\n '\">' .\n htmlspecialchars($row['name']) .\n '<\/option>';\n}<\/pre>\n\n\n\nfetch_data.php<\/code> can be written as:<\/p>\n\n\n\n<?php\n\nrequire_once \"db.php\";\n\nif (!isset($_POST['get_option'])) {\n exit;\n}\n\n$countryId = filter_input(\n INPUT_POST,\n 'get_option',\n FILTER_VALIDATE_INT\n);\n\nif (!$countryId) {\n exit;\n}\n\n$stmt = $conn->prepare(\n \"SELECT state_id, name\n FROM ls_states\n WHERE country_id = ? AND status = 1\n ORDER BY name\"\n);\n\n$stmt->bind_param(\"i\", $countryId);\n$stmt->execute();\n\n$result = $stmt->get_result();\n\necho '<option value=\"\">Select state<\/option>';\n\nwhile ($row = $result->fetch_assoc()) {\n echo '<option value=\"' .\n htmlspecialchars($row['state_id']) .\n '\">' .\n htmlspecialchars($row['name']) .\n '<\/option>';\n}\n\n$stmt->close();\n$conn->close();<\/pre>\n\n\n\n
\n\n\n\nComplete Example<\/h2>\n\n\n\n
dropdown-ajax.php<\/code> file can be structured as follows:<\/p>\n\n\n\n<?php\n\nrequire_once \"db.php\";\n\n$sql = \"SELECT country_id, name\n FROM ls_countries\n WHERE status = 1\n ORDER BY name\";\n\n$result = $conn->query($sql);\n\n?>\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n <title>Dependent Dropdown<\/title>\n\n <script src=\"https:\/\/code.jquery.com\/jquery-3.7.1.min.js\"><\/script>\n\n <script>\n function fetch_select(countryId) {\n\n if (!countryId) {\n document.getElementById(\"new_select\").innerHTML =\n '<option value=\"\">Select state<\/option>';\n return;\n }\n\n $.ajax({\n type: \"POST\",\n url: \"fetch_data.php\",\n data: {\n get_option: countryId\n },\n success: function(response) {\n document.getElementById(\"new_select\").innerHTML =\n response;\n },\n error: function() {\n document.getElementById(\"new_select\").innerHTML =\n '<option value=\"\">Unable to load states<\/option>';\n }\n });\n }\n <\/script>\n<\/head>\n\n<body>\n\n <label for=\"country\">Country:<\/label>\n\n <select id=\"country\" onchange=\"fetch_select(this.value)\">\n <option value=\"\">Select country<\/option>\n\n <?php while ($row = $result->fetch_assoc()): ?>\n <option value=\"<?= htmlspecialchars($row['country_id']) ?>\">\n <?= htmlspecialchars($row['name']) ?>\n <\/option>\n <?php endwhile; ?>\n <\/select>\n\n <label for=\"new_select\">State:<\/label>\n\n <select id=\"new_select\">\n <option value=\"\">Select state<\/option>\n <\/select>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
\n\n\n\nHow the Dynamic Dropdown Works<\/h2>\n\n\n\n
\n
onchange<\/code> event calls the JavaScript fetch_select()<\/code> function.<\/li>\n\n\n\ncountry_id<\/code> to fetch_data.php<\/code>.<\/li>\n\n\n\nls_states<\/code> table for matching states.<\/li>\n\n\n\n<option><\/code> elements.<\/li>\n\n\n\n
\n\n\n\nSecurity Considerations<\/h2>\n\n\n\n
\n
mysql_*<\/code> PHP functions.<\/li>\n\n\n\n
\n\n\n\nConclusion<\/h2>\n\n\n\n
mysql_*<\/code> functions used in older implementations with MySQLi or PDO<\/strong>, along with prepared statements and appropriate input validation.<\/p>\n\n\n\n
\n\n\n\nFAQs<\/h2>\n\n\n\n
1. What is a dependent dropdown list?<\/h3>\n\n\n\n
2. Why is AJAX used for dependent dropdowns?<\/h3>\n\n\n\n
3. Can this implementation be used without jQuery?<\/h3>\n\n\n\n
fetch()<\/code> API or XMLHttpRequest<\/code>. jQuery is used in this example because the original implementation uses jQuery AJAX.<\/p>\n\n\n\n
\n\n\n\nRelated Articles<\/h2>\n\n\n\n
\n
Send Email Using HTML Templates in CodeIgniter<\/a><\/li>\n\n\n\n
How to Install Nginx and Let’s Encrypt SSL with HTML, Docker and Ubuntu 20.04<\/a><\/li>\n\n\n\n
Install PHP 7.2 Mcrypt Module on Ubuntu 18.04<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"