{"id":1489,"date":"2017-05-08T16:58:46","date_gmt":"2017-05-08T11:28:46","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=1489"},"modified":"2026-09-08T10:34:51","modified_gmt":"2026-09-08T05:04:51","slug":"dynamic-dependent-drop-list-using-htmlphpmysqlajax","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/dynamic-dependent-drop-list-using-htmlphpmysqlajax\/","title":{"rendered":"Dynamic Dependent drop down list using HTML, PHP, MySQL, and Ajax"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A dynamic dependent dropdown list allows the options in one dropdown to change based on the value selected in another dropdown.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, when a user selects a <strong>country<\/strong>, the second dropdown can automatically display the corresponding <strong>states<\/strong>. In this guide, we will create a dependent dropdown using <strong>HTML, PHP, MySQL, and AJAX<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The existing code and implementation steps are retained below.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before starting, make sure you have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A PHP-enabled web server.<\/li>\n\n\n\n<li>MySQL database access.<\/li>\n\n\n\n<li>jQuery available in the application.<\/li>\n\n\n\n<li>Basic knowledge of HTML, PHP, MySQL, and JavaScript.<\/li>\n\n\n\n<li>A database named <code>demo<\/code> or <code>linus<\/code> with the required tables.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Implementation<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Create <code>dropdown-ajax.php<\/code><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create a new file named:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">dropdown-ajax.php<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Create the MySQL connection inside the file:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\n$host = 'localhost';\n$user = 'root';\n$pass = '';\n\nmysql_connect($host, $user, $pass);\n\nmysql_select_db('demo');\n\n?><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Create the MySQL Tables<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create the <code>ls_countries<\/code> and <code>ls_states<\/code> tables.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">CREATE TABLE `ls_states` (  `state_id` int(11) NOT NULL,  `name` varchar(30) NOT NULL,  `country_id` int(11) NOT NULL DEFAULT '1',  `status` int(11) NOT NULL COMMENT '1->active,0->deactive', PRIMARY KEY (`state_id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">CREATE TABLE `ls_countries` (  `country_id` int(11) NOT NULL AUTO_INCREMENT,  `sortname` varchar(3) NOT NULL,  `name` varchar(150) NOT NULL,  `phonecode` int(11) NOT NULL,  `status` int(11) NOT NULL COMMENT '1->active,0->deactive', PRIMARY KEY (`country_id`)) ENGINE=InnoDB AUTO_INCREMENT=247 DEFAULT CHARSET=utf8<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Create the Dropdown Lists<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create two dropdown lists. The first dropdown displays the countries, while the second dropdown is populated dynamically based on the selected country.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;select onchange=\"fetch_select(this.value);\">\n\n&lt;option>Select country&lt;\/option>\n\n&lt;?php\n\n$select=mysql_query(\"select * from ls_countries\");\n\nwhile($row=mysql_fetch_array($select))\n\n{\n\necho \"&lt;option value=\".$row['country_id'].\">\".$row['name'].\"&lt;\/option>\";\n\n}\n\n?>\n\n&lt;\/select>\n\n&lt;select id=\"new_select\">\n\n&lt;\/select><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">When a country is selected, the <code>fetch_select()<\/code> function is called with the selected country ID.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Create the AJAX Function<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create the JavaScript function that sends the selected country value to <code>fetch_data.php<\/code>.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function fetch_select(val)\n\n{\n\n$.ajax({\n\n type: 'post',\n\n url: 'fetch_data.php',\n\n data: {\n\n  get_option:val\n\n},\n\n success: function (response) {\n\ndocument.getElementById(\"new_select\").innerHTML=response;\n\n}\n\n});\n\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The AJAX request sends the selected country ID to <code>fetch_data.php<\/code>. The response is then inserted into the second dropdown.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Create <code>fetch_data.php<\/code><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create a new file named:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">fetch_data.php<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This file receives the selected country ID, retrieves the corresponding states from MySQL, and returns them as dropdown options.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\nif(isset($_POST['get_option']))\n\n{\n\n$host = 'localhost';\n\n$user = 'root';\n\n$pass = '';\n\nmysql_connect($host, $user, $pass);\n\nmysql_select_db('demo');\n\n$country_id = $_POST['get_option'];\n\n$find=mysql_query(\"select * from ls_states where country_id='$country_id'\");\n\nwhile($row=mysql_fetch_array($find))\n\n{\n\necho \"&lt;option>\".$row['name'].\"&lt;\/option>\";\n\n}\n\nexit;\n\n}\n\n?><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Final Code<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><code>dropdown-ajax.php<\/code><\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\n$host = 'localhost';\n\n$user = 'root';\n\n$pass = '';\n\nmysql_connect($host, $user, $pass);\n\nmysql_select_db('demo');\n\n$select=mysql_query(\"select * from ls_countries\");\n\nwhile($row=mysql_fetch_array($select))\n\n{\n\necho \"&lt;option value=\".$row['country_id'].\">\".$row['name'].\"&lt;\/option>\";\n\n}\n\n?>\n\n&lt;html>\n\n&lt;head>\n\n&lt;source src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.1\/jquery.min.js\" type=\"text\/javascript\">\n\nfunction fetch_select(val)\n\n{\n\n$.ajax({\n\n type: 'post',\n\n url: 'fetch_data.php',\n\n data: {\n\n  get_option:val\n\n},\n\n success: function (response) {\n\ndocument.getElementById(\"new_select\").innerHTML=response;\n\n}\n\n});\n\n}\n\n&lt;\/head>\n\n&lt;body>\n\n&lt;select onchange=\"fetch_select(this.value);\">\n\n&lt;option>Select country&lt;\/option>\n\n&lt;?php\n\n$host = 'localhost';\n\n$user = 'root';\n\n$pass = '';\n\nmysql_connect($host, $user, $pass);\n\nmysql_select_db('linus');\n\n$select=mysql_query(\"select * from ls_countries\");\n\nwhile($row=mysql_fetch_array($select))\n\n{\n\necho \"&lt;option value=\".$row['country_id'].\">\".$row['name'].\"&lt;\/option>\";\n\n}\n\n?>\n\n&lt;\/select>\n\n&lt;select id=\"new_select\">\n\n&lt;\/select>\n\n&lt;\/body>\n\n&lt;\/html><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><code>fetch_data.php<\/code><\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\nif(isset($_POST['get_option']))\n\n{\n\n$host = 'localhost';\n\n$user = 'root';\n\n$pass = '';\n\nmysql_connect($host, $user, $pass);\n\nmysql_select_db('linus');\n\n$country_id = $_POST['get_option'];\n\n$find=mysql_query(\"select * from ls_states where country_id='$country_id'\");\n\nwhile($row=mysql_fetch_array($find))\n\n{\n\necho \"&lt;option>\".$row['name'].\"&lt;\/option>\";\n\n}\n\nexit;\n\n}\n\n?><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A dynamic dependent dropdown is useful when the options in one field depend on another field. In this example, the country dropdown triggers an AJAX request, PHP retrieves the matching states from MySQL, and the results are displayed in the second dropdown without reloading the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The same approach can be extended to other dependent selections such as <strong>country \u2192 state \u2192 city<\/strong>, category \u2192 subcategory, or department \u2192 employee.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">FAQs<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">1. What is a dependent dropdown?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A dependent dropdown is a dropdown whose options are dynamically loaded based on the value selected in another dropdown.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. Why is AJAX used in this example?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">AJAX allows the second dropdown to be updated dynamically without refreshing the entire page.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3. What does <code>fetch_select()<\/code> do?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>fetch_select()<\/code> JavaScript function sends the selected country ID to <code>fetch_data.php<\/code> and places the returned state options into the second dropdown.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">4. Where are the state values retrieved?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The state values are retrieved from the <code>ls_states<\/code> MySQL table using the selected <code>country_id<\/code>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">5. Can this approach be used for more than two dropdowns?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. The same concept can be extended to multiple dependent dropdowns, such as country \u2192 state \u2192 city.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Related Articles<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">PHP Zip Directory Automatically Download<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Learn how to create and automatically download ZIP archives of directories using PHP.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/php-zip-directory-automatically-download-using\/\">https:\/\/pheonixsolutions.com\/blog\/php-zip-directory-automatically-download-using\/<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Simple Form jQuery Validation with PHP<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Learn how to implement form validation using jQuery and PHP for web applications.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/simple-form-jquery-validation-php\/\">https:\/\/pheonixsolutions.com\/blog\/simple-form-jquery-validation-php\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Talk to our experts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Looking for the right technology solution for your business? Our team of experts can help you with development, cloud, DevOps, design, and a wide range of other technology needs. Get in touch with our team&nbsp;<a href=\"https:\/\/pheonixsolutions.com\/contact\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction A dynamic dependent dropdown list allows the options in one dropdown to change based on the value selected in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1024],"tags":[341,179,273],"class_list":["post-1489","post","type-post","status-publish","format-standard","hentry","category-security","tag-codeigniter","tag-mysql-2","tag-php","psol-cat-security"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-o1","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=1489"}],"version-history":[{"count":1,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1489\/revisions"}],"predecessor-version":[{"id":11516,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1489\/revisions\/11516"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=1489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=1489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=1489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}