Node JS Dependent Dropdown Example Tutorial

Node JS Dependent Dropdown Example Tutorial

Last Updated on 1 Comment on Node JS Dependent Dropdown Example Tutorial

Node js dependent dropdown from MySQL database; This tutorial will explain to you step by step how to populate dynamic dependent country state city dropdown in node js express app from MySQL database.

The dynamic dependent dropdown mean first dropdown changes value, Then need to repopulate the second dropdown based on the select value in the first dropdown – usually by rerunning your ajax call to load the second drop-down, but using the value of the first drop-down to decide which data to request from the server.

This dependent country state city dropdown in node js from database tutorial will create country state city dynamic dependent dropdown and populate the dropdown list values based on the selected dropdown value from mYsql databse in node js express app.

Dynamic Dependent Dropdown in Node JS Express

Let’s follow the following steps to populate dynamic dependent dropdown from database in node js express app:

  • Step 1 – Create Node Express js App
  • Step 2 – Create Database and Country State City Tables
  • Step 3 – Install express ejs body-parser mysql Modules
  • Step 4 – Connect App to MySQL DB
  • Step 5 – Create Server.js File And Import Modules
  • Step 6 – Create Dropdown HTML Markup
  • Step 7 – Create Country State City List Routes
  • Step 8 – Start App Server

Step 1 – Create Node Express js App

Execute the following command on terminal to create node js app:

mkdir my-app
cd my-app
npm init -y
Recommended:-Node Js Google ReCaptcha v3 Example

Step 2 – Create Database and Country State City Tables

Create database and tables; so execute the following sql query to create database and table:

CREATE DATABASE my-node;


CREATE TABLE `countries` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE `states` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `country_id` int(11) NOT NULL,
 `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE `cities` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `state_id` int(11) NOT NULL,
 `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO `countries` VALUES (1, 'USA', 1);
INSERT INTO `countries` VALUES (2, 'Canada', 1);


INSERT INTO `states` VALUES (1, 1, 'New York', 1);
INSERT INTO `states` VALUES (2, 1, 'Los Angeles', 1);
INSERT INTO `states` VALUES (3, 2, 'British Columbia', 1);
INSERT INTO `states` VALUES (4, 2, 'Torentu', 1);


INSERT INTO `cities` VALUES (1, 2, 'Los Angales', 1);
INSERT INTO `cities` VALUES (2, 1, 'New York', 1);
INSERT INTO `cities` VALUES (3, 4, 'Toranto', 1);
INSERT INTO `cities` VALUES (4, 3, 'Vancovour', 1);

Step 3 – Install express ejs body-parser mysql Modules

Execute the following command on the terminal to install express ejs body-parser MySQL modules:

npm install express ejs mysql body-parser --save

body-parser – Node.js request body parsing middleware which parses the incoming request body before your handlers, and make it available under req.body property. In other words, it simplifies the incoming request.

Express-EJS– EJS is a simple templating language which is used to generate HTML markup with plain JavaScript. It also helps to embed JavaScript to HTML pages.

Mysql – an open-source relational database management system (RDBMS).

Recommended:-Node js Express User Authentication Rest API using MySQL Example

Step 4 – Connect App to MySQL DB

Create database.js file into your app root directory and add the following code into it to connect your app to the mongodb database:

var mysql = require('mysql');
var conn = mysql.createConnection({
  host: 'localhost', // Replace with your host name
  user: 'root',      // Replace with your database username
  password: '',      // Replace with your database password
  database: 'my-node' // // Replace with your database Name
}); 

conn.connect(function(err) {
  if (err) throw err;
  console.log('Database is connected successfully !');
});
module.exports = conn;
Recommended:-Node JS Express Rest API File Upload Example

Step 5 – Create Server.js File And Import Modules

Create server.js file; so visit your app root directory and create server.js file; Then import above installed modules into it:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var db = require('./database');

var app = express();
Recommended:-Node js Upload CSV File to MySQL Database

Step 6 – Create Dropdown HTML Markup

Create html markup page for populate dependent dropdown from database in node js express; So visit root directory and create index.ejs. Then add the following code into it: 

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="content">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>Node js Populate Dynamic Dependent Dropdown From MySQL Database - Tutsmake.COM</title>


        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    </head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card">
                    <div class="card-header">
                        <h2 class="text-info">Node js Populate Dynamic Dependent Dropdown From MySQL Database - Tutsmake.COM</h2>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                          <label for="country">Country</label>
                          <select class="form-control" id="country-dropdown">
                          <option value="">Select Country</option>
                          <% if(data.length){

                          for(var i = 0; i< data.length; i++) {%> 

                                <option value="<%= data[i].id%>">
                                 <%= data[i].name%>
                                </option>
      
                           <% } } %>
                          
                          </select>
                        </div>

                        <div class="form-group">
                          <label for="state">State</label>
                          <select class="form-control" id="state-dropdown">
                            
                          </select>
                        </div>                        

                        <div class="form-group">
                          <label for="city">City</label>
                          <select class="form-control" id="city-dropdown">
                            
                          </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script >

    $(document).ready(function() {

        $('#country-dropdown').on('change', function() {
            var country_id = this.value;
            $("#state-dropdown").html('');
            $.ajax({
                url: "http://localhost:3000/get-states-by-country",
                type: "POST",
                data: {
                    name: 'country',
                    country_id: country_id,
                },
                dataType: 'json',
                success: function(result) {
                    $('#state-dropdown').html('<option value="">Select State</option>');
                    $.each(result.states, function(key, value) {
                        $("#state-dropdown").append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                    $('#city-dropdown').html('<option value="">Select State First</option>');
                }
            });


        });

        $('#state-dropdown').on('change', function() {
            var state_id = this.value;
            $("#city-dropdown").html('');
            $.ajax({
                url: "http://localhost:3000/get-cities-by-state",
                type: "POST",
                data: {
                    name: 'state',
                    state_id: state_id,
                },
                dataType: 'json',
                success: function(result) {
                    $('#city-dropdown').html('<option value="">Select City</option>');
                    $.each(result.cities, function(key, value) {
                        $("#city-dropdown").append('<option value="' + value.id + '">' + value.name + '</option>');
                    });

                }
            });


        });
    }); 
</script>
</body>
</html>
Recommended:-Angular CRUD + Node.js + Express + MySQL Tutorial

Step 7 – Create Country State City List Routes

Create country city state routes; so visit routes open server.js file; Then add the following routes into it:

var createError = require('http-errors');
var http = require('http');
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var db = require('./database');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, '/'));
app.set('view engine', 'ejs');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: false
}));

app.get('/', function(req, res) {
    db.query('SELECT * FROM countries ORDER BY id desc', function(err, rows) {
        res.render('index', {
            data: rows
        });
    });
});

app.post('/get-states-by-country', function(req, res) {


    db.query('SELECT * FROM states WHERE country_id = "' + req.body.country_id + '"',
        function(err, rows, fields) {

            if (err) {
                res.json({
                    msg: 'error'
                });
            } else {
                res.json({
                    msg: 'success',
                    states: rows
                });
            }

        });
});

app.post('/get-cities-by-state', function(req, res) {


    db.query('SELECT * FROM cities WHERE state_id = "' + req.body.state_id + '"',
        function(err, rows, fields) {

            if (err) {
                res.json({
                    msg: 'error'
                });
            } else {
                res.json({
                    msg: 'success',
                    cities: rows
                });
            }

        });
});

// port must be set to 8080 because incoming http requests are routed from port 80 to port 8080
app.listen(3000, function() {
    console.log('Node app is running on port 3000');
});

module.exports = app;
Recommended:-Create Rest API Using Node.js, Express and MySQL

Step 8 – Start App Server

You can use the following command to start node js app server:

//run the below command

npm start

after run this command open your browser and hit 

http://127.0.0.1:3000/

Conclusion

Node js dependent country state city dropdown from MySQL database; in this tutorial you will learn how to build dynamic dependent dropdown and populate dynamic values in country state city dropdown list from mysql databse in node js express app.

Recommended Node JS Tutorials

Recommended:-Node js Send Email Through Gmail with Attachment Example
Recommended:-Node.js Express Login Example with MySQL
Recommended:-Node JS Express Crud with Mysql Example
Recommended:-Create Registration and Login Form in Node.js MySQL
Recommended:-React JS + Node JS File Upload Tutorial with Example
Recommended:-Node JS Facebook Login Example
Recommended:-Node JS Resize Image Before Upload using Multer Sharp Example
Recommended:-Node JS Google Authentication with Passport Example
Recommended:-Node JS Express Socket IO Chat Application Example
Recommended:-Node JS LinkedIn Login using Passport Example
Recommended:-Node.js Web Scraping Example
Recommended:-Node js Express Get Client IP Address Tutorial
Recommended:-VUE JS CRUD + Node.js + Express + MySQL Example
Categories: MySQL, Node js Tagged With:

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

One reply to Node JS Dependent Dropdown Example Tutorial

  1. Hii,

    I’m new in application development, I refer your code and implement some changes in my code as you shown in the your code.
    But my code doesn’t work. Please help me.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *