Creating Dependent Dropdown Menu Filter Using Nodejs

I need to create two dropdown menus on a webpage - (the second dropdown menu is dependent on the first dropdown menu) - and populate both the menus with records from two different

Solution 1:

You have asked two questions here. One is how to use express. The other is how to implement dependent dropdowns. Perhaps these should be two different questions but let me tackle each one here. First, how do we use express (which is a web server written in node)

1. How to use Express

1. Install express in a directory of your choosing (see link for details)
2. $ npm install express --save
3. Create a new javascript file
4. Use the code below

var express = require('express');
    var app = express();   
    app.get('/', function (req, res) {
      res.send("<h1>hello world</h1>");
    });    
    app.listen(8080, function () {
      console.log('Example app listening on port 8080!');
      //call this app from localhost://8080 
    });

This is a simple "hello world". I've explained this in detail in this blog. If you want to use an html file instead of simple html code, use the following:

var http = require('http');
var fs = require('fs');
http.createServer(function (req, res) {
  fs.readFile('index.html', function(err, data) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    return res.end();
  });
}).listen(8080);

Note that you will need to use npm or other package to install express, http and fs. Your html code will be in index.html.

Your second question is on how to use dependent dropdowns.

2. Dependent dropdowns

For dependent dropdowns, you are working purely on the client side. So vanilla javascript code will work. For instance, you can use jquery or other useful libraries.

<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><!-- optionally if you need translation for your language then include locale file as mentioned below --><scriptsrc="path/to/js/locales/<lang>.js"></script><h1>Dependent Dropdown</h1><formname="myform"id="myForm"><selectname="optone"id="continentSel"size="1"><optionvalue=""selected="selected">Select continent</option></select><br><br><selectname="opttwo"id="countrySel"size="1"><optionvalue=""selected="selected">Please select continent first</option></select><br><br><selectname="optthree"id="citySel"size="1"><optionvalue=""selected="selected">Please select state first </option></select></form><hr/><script>var stateObject = {
  "Europe": {
          "France": ["Paris", "Lyon"],
          "UK": ["London", "Birmingham"]
      },
      "Africa": {
          "Senegal": ["Dakar", "Louga"],
          "South Africa": ["Cape Town", "Pretoria"]
      }
}
window.onload = function () {
    var continentSel = document.getElementById("continentSel"),
        countrySel = document.getElementById("countrySel"),
        citySel = document.getElementById("citySel");
    for (var item in stateObject) {
        continentSel.options[continentSel.options.length] = newOption(item, item);
    }
    continentSel.onchange = function () {
        countrySel.length = 1; // remove all options bar first
        citySel.length = 1; // remove all options bar firstif (this.selectedIndex < 1) return; // donefor (var item in stateObject[this.value]) {
            countrySel.options[countrySel.options.length] = newOption(item, item);
        }
    }
    continentSel.onchange(); // reset in case page is reloaded
    countrySel.onchange = function () {
        citySel.length = 1; // remove all options bar firstif (this.selectedIndex < 1) return; // donevar cities = stateObject[continentSel.value][this.value];
        for (var i = 0; i < cities.length; i++) {
            citySel.options[citySel.options.length] = newOption(cities[i], cities[i]);
        }
    }
}
</script>

Finally see the full working code here