How to Create Dependent Dropdown in Node JS Example Tutorial?

15-Dec-2022

.

Admin

How to Create Dependent Dropdown in Node JS Example Tutorial?

Hello Friends,

This example focuses on creating a dependent dropdown in the node js example tutorial. You will learn country, state, city, etc. dynamic dependent dropdown in node.js with MySQL. This post will give you a simple example of creating a dependent dropdown using node js. You will do the following things for How to Create Dependent Dropdown in Node JS Example Tutorial?

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 the database tutorial will create a country state city dynamic dependent dropdown and populate the dropdown list values based on the selected dropdown value from MySQL database in node js express app.

Step 1: Create Node Express js App


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

mkdir my-app

cd my-app

npm init -y

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 makes it available under req.body property. In other words, it simplifies 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 into HTML pages.

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

Step 4: Connect App to MySQL DB

Create database.js file in 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;

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();

Step 6: Create Dropdown HTML Markup

Create HTML markup page for populating dependent dropdown from the database in node js express; So visit root directory and create an 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>How to Create Dependent Dropdown in Node JS Example Tutorial?</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">How to Create Dependent Dropdown in Node JS Example Tutorial?</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>

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;

Step 8: Start App Server

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

//run the below command

npm start

After running this command open your browser and hit

http://127.0.0.1:3000/

I hope it can help you...

#Node JS