MySql Database Structure:

In beginning of this tutorial we have to create database and using country, state and city tables we will display dropdown inputs. Each dropdown input get data using parent of input.

If you want state a country then first choose country from dropdown input and on selection jQuery or JavaScript event fetch child dropdown data using choosed country id. So first we create database using below database structure.

--
-- Table structure for table `city`
--
CREATE TABLE `city` (
  `id` tinyint(4) NOT NULL auto_increment,
  `city` varchar(50) default NULL,
  `stateid` tinyint(4) default NULL,
  `countryid` tinyint(4) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  AUTO_INCREMENT=5 ;
--
-- Dumping data for table `city`
--
INSERT INTO `city` VALUES (1, 'Los Angales', 2, 1);
INSERT INTO `city` VALUES (2, 'New York', 1, 1);
INSERT INTO `city` VALUES (3, 'Toranto', 4, 2);
INSERT INTO `city` VALUES (4, 'Vancovour', 3, 2);
-- --------------------------------------------------------
--
-- Table structure for table `country`
--
CREATE TABLE `country` (
  `id` tinyint(4) NOT NULL auto_increment,
  `country` varchar(20) NOT NULL default '',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  AUTO_INCREMENT=3 ;
--
-- Dumping data for table `country`
--
INSERT INTO `country` VALUES (1, 'USA');
INSERT INTO `country` VALUES (2, 'Canada');
-- --------------------------------------------------------
--
-- Table structure for table `state`
--
CREATE TABLE `state` (
  `id` tinyint(4) NOT NULL auto_increment,
  `countryid` tinyint(4) NOT NULL,
  `statename` varchar(40) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  AUTO_INCREMENT=5 ;
--
-- Dumping data for table `state`
--
INSERT INTO `state` VALUES (1, 1, 'New York');
INSERT INTO `state` VALUES (2, 1, 'Los Angeles');
INSERT INTO `state` VALUES (3, 2, 'British Columbia');
INSERT INTO `state` VALUES (4, 2, 'Toranto');

Two Different way for excute this process:

1. Now develope a Ajax function for http request without rendring page.

function getState(countryId) {
       $.ajax({
                type:"POST",
                url:"findState.php",
                data:'country='+countryId,
                success: function(data){
                    $('#statediv').html(data);
                }
            });
    }

2. Here we can also use JavaScript function for processed this program.

This function work without any jQuery Library. It’s all depended on your web browser and window object model. We will learn more about window object model and browser object model in coming blogs.

function getXMLHTTP() { //function to return the xml http object
        var xmlhttp=false;   
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {       
            try{           
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }
            
        return xmlhttp;
}

function getState(countryId) {       
       
        var strURL="findState.php?country="+countryId;
        var req = getXMLHTTP();
       
        if (req) {
           
            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                       
                        document.getElementById('statediv').innerHTML=req.responseText;                       
                    } else {
                        alert("There was a problem while using XMLHTTP:n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }       
}

I’d like to sign off with a big thank you. Thank you for reading and for helping me grow as a writer. But most of all thank you for being a part of my journey.
With love