title: country state city dropdown list in nodejs and mongodb
body: <p>I have "country" table in "country_name": "India", "country_name": "USA" and more entry...
  And second table "state" {"country_name": "India", "state": "Haryana"}, {"country_name": "USA", "state": "Texas"} and many more entry...
  And the third table "city" {"state": "Haryana", "city": "Panchkula"}, {"state": "Texas", "city": "abc"} and many more entry...</p>
  
  <p>And these all table in MongoDB. Now I want to show the 3 dropdown list which country select then show all respective state and then select any state then should show respective city.</p>
  
  <p>I am using NodeJs but not find out an accurate solution. I am sharing here our app.js code</p>
  
  <p>Please help me...Thank in advance</p>
  
  <p>app.js</p>
  
  <pre><code>var express = require('express');
  var routes = require('routes');
  var http = require('http');
  var bodyParser = require('body-parser');
  var aa = bodyParser.urlencoded({extended: false});
  
  var app = express();
  
  app.set('port', process.env.PORT || 8000);
  // Configure view engine to render EJS templates.
  app.set('views', __dirname + '/views');
  // app.set('view engine', 'ejs');
  app.engine('html', require('ejs').renderFile);
  var mongoose = require('mongoose');
  var url = "mongodb://localhost:27017/firstdb";
  
  app.get('/', function(req, res){
      mongoose.connect(url, function(err, db){
          db.collection('country').find({}).toArray(function(err, result){
              if(err) throw err;
              res.render('index.html', {data: result});
              db.close();
          });
      });
  });
  
  app.post('/send', aa, function(req, res){
      var c = req.body.selectedCountry;
      mongoose.connect(url, function(err, db){
          if (err) throw err;
          var myquery = {country_name: c};
          db.collection('state').find(myquery).toArray(function(err, result){
              if(err) throw err;
              console.log("xxxxxxxxxxxxxxxxxxxxxxxx", result);
              res.render('index.html', {statevalue: result});
              db.close();
          });
      });
      res.end('done');
  });
  
  http.createServer(app).listen(app.get('port'), function(){
    console.log("Express server listing on port "+app.get('port'));
  })
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function(){
              $("select.country").change(function(){
                  var selectedCountry = $(this).children("option:selected").val();
                  // alert(selectedCountry);
                  $.post('http://localhost:8000/send', {selectedCountry:selectedCountry}, function(data){
                      if(data === 'done'){
                          // window.location.href='/';
                      }
                  });
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;select class="country"&gt;
          &lt;option value=""&gt;Select Country&lt;/option&gt;
          &lt;% if(data.length) { 
          for(var i = 0; i&lt;data.length; i++) { %&gt;
  
              &lt;option value="&lt;%=data[i].country_name%&gt;"&gt;&lt;%=data[i].country_name%&gt;&lt;/option&gt;
          &lt;%
              }
              } else { %&gt;
              &lt;option value=""&gt;not found&lt;/option&gt;
              &lt;% } %&gt;
      &lt;/select&gt;
      &lt;% if(statevalue.length)
      { %&gt;
          &lt;h1&gt;hi&lt;/h1&gt;
      &lt;% }
       %&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Tables Structure:
  Country Table:</p>
  
  <pre><code>{ "_id" : ObjectId("5d159c63de4fda6382477bf6"), "country_name" : "India" }
  { "_id" : ObjectId("5d159c63de4fda6382477bf7"), "country_name" : "USA" }
  </code></pre>
  
  <p>state table:</p>
  
  <pre><code>{ "_id" : ObjectId("5d159d09de4fda6382477bf8"), "country_name" : "India", "state" : "Punjab" }
  { "_id" : ObjectId("5d159d09de4fda6382477bf9"), "country_name" : "India", "state" : "Haryana" }
  { "_id" : ObjectId("5d159d09de4fda6382477bfa"), "country_name" : "USA", "state" : "Texas" }
  { "_id" : ObjectId("5d159d09de4fda6382477bfb"), "country_name" : "USA", "state" : "New York" }
  </code></pre>
  
  <p>city table:</p>
  
  <pre><code>{ "_id" : ObjectId("5d15b3aede4fda6382477bfc"), "state" : "Punjab", "city" : "Mohali" }
  { "_id" : ObjectId("5d15b3aede4fda6382477bfd"), "state" : "Punjab", "city" : "Ludhiana" }
  { "_id" : ObjectId("5d15b3aede4fda6382477bfe"), "state" : "Haryana", "city" : "Panchkula" }
  { "_id" : ObjectId("5d15b3aede4fda6382477bff"), "state" : "Haryana", "city" : "Ambala" }
  { "_id" : ObjectId("5d15b3aede4fda6382477c00"), "state" : "Texas", "city" : "Dallas" }
  { "_id" : ObjectId("5d15b3aede4fda6382477c01"), "state" : "Texas", "city" : "Austin" }
  { "_id" : ObjectId("5d15b3aede4fda6382477c02"), "state" : "New York", "city" : "Auburn" }
  { "_id" : ObjectId("5d15b3aede4fda6382477c03"), "state" : "New York", "city" : "Fulton" }
  </code></pre>