Node.js is a powerful JavaScript-based platform that is used for developing server-side applications. It is an open-source, cross-platform runtime environment for developing server-side and networking applications. Node.js applications are written in JavaScript and can be run within the Node.js runtime on various platforms.
In this tutorial, we will learn how to create a dependent dropdown list in Node.js. We will use the popular jQuery library to create the dependent dropdown list.
First, we will create a simple HTML form with two dropdown lists. The first dropdown list will contain a list of countries and the second dropdown list will contain a list of states for the selected country.
Next, we will create a JavaScript file that will contain the code for creating the dependent dropdown list. We will use the jQuery library to make an AJAX request to the server and get the list of states for the selected country.
Finally, we will create a Node.js server that will handle the AJAX request and return the list of states for the selected country.
This tutorial will help you understand how to create a dependent dropdown list in Node.js.
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
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).
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;
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 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>
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 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.
