使用nodeJS创建依赖下拉菜单过滤器

Question

我需要在网页上创建两个下拉菜单 - （第二个下拉菜单取决于第一个下拉菜单） - 并使用来自 a.csv 文件的两个不同列的记录填充这两个菜单。

我可以使用 NodeJS 读取 csv 文件，并将所需的列放入两个不同的 arrays 中，如下所示：

uniqueCountryName
[
 'Italy',
 'Spain',
 'France',
 'England'
]
uniqueCityName
[
 'Paris',
 'Milan',
 'Marseilles',
 'Venice'
 'London',
 'Rome',
 'Berlin',
 'Madrid',
 'Barcelona' 
]

这是我到目前为止使用的 nodeJS 代码：

const csv = require('csv-parser');
const fs = require('fs');
const results = [];
const CountryName = [];
const CityName = [];

fs.createReadStream('C:/Users/learningsql/Desktop/project.csv')
.pipe(csv())
.on('data', (data) => results.push(data))
.on('end', () => {
    var CountryName = []
    for (var item in results) {
        CountryName.push(results[item]["CountryName"])
    }
    /* console.log(CountryName) */

    const uniqueCountryName = Array.from(new Set(CountryName));
    console.log("uniqueCountryName")
    console.log(uniqueCountryName)
});

fs.createReadStream('C:/Users/learningsql/Desktop/project.csv')
.pipe(csv())
.on('data', (data) => results.push(data))
.on('end', () => {
    for (var item in results) {
        CityName.push(results[item]["CityName"])
    }
    /* console.log(CityName) */

    const uniqueCityName = Array.from(new Set(CityName));
    console.log("uniqueCityName")
    console.log(uniqueCityName)
});

现在我需要做两件事：首先，我需要在网页上的两个不同下拉菜单中填充这两个不同的 arrays。 CountryName 应该 go 进入第一个下拉菜单， CityName 应该 go 进入第二个下拉菜单。 据我了解，浏览器无法从终端读取output，所以需要使用Express.JS搭建服务器。 我怎样才能做到这一点？

其次，正如我已经提到的，第二个下拉记录应该依赖于第一个，我们如何映射/链接 arrays？ 例如，当 I select Italy 在第一个下拉菜单中时，只有意大利城市（米兰、威尼斯、罗马等）应该出现在第二个下拉菜单中。 如果我 select 西班牙，则只有西班牙城市应显示在下拉菜单中（马德里、巴塞罗那等）。

作为参考，下拉菜单应该是这样的

我是 NodeJS 的新手，任何帮助都将不胜感激。 谢谢。

Answer 1

你在这里问了两个问题。 一是如何使用快递。 另一个是如何实现依赖下拉。 也许这应该是两个不同的问题，但让我在这里解决每个问题。 一、我们如何使用express（这是一个用node写的web服务器）

一、如何使用快递

1. 将 express 安装在您选择的目录中（有关详细信息，请参阅链接）
2. $ npm install express --save
3. 新建 javascript 文件
4. 使用下面的代码

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

这是一个简单的“hello world”。 我已在此博客中详细解释了这一点。 如果要使用 html 文件而不是简单的 html 代码，请使用以下代码：

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

请注意，您需要使用 npm 或其他 package 来安装 express、http 和 fs。 您的 html 代码将在index.html中。

您的第二个问题是关于如何使用依赖下拉菜单。

2. 依赖下拉菜单

对于依赖下拉列表，您纯粹在客户端工作。 所以普通的 javascript 代码可以工作。 例如，您可以使用 jquery 或其他有用的库。

<script src="//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 -->
<script src="path/to/js/locales/<lang>.js"></script>
<h1>Dependent Dropdown</h1>

<form name="myform" id="myForm">
    <select name="optone" id="continentSel" size="1">
        <option value="" selected="selected">Select continent</option>
    </select>
    <br>
    <br>
    <select name="opttwo" id="countrySel" size="1">
        <option value="" selected="selected">Please select continent first</option>
    </select>
    <br>
    <br>
    <select name="optthree" id="citySel" size="1">
        <option value="" 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] = new Option(item, item);
    }
    continentSel.onchange = function () {
        countrySel.length = 1; // remove all options bar first
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) return; // done
        for (var item in stateObject[this.value]) {
            countrySel.options[countrySel.options.length] = new Option(item, item);
        }
    }
    continentSel.onchange(); // reset in case page is reloaded
    countrySel.onchange = function () {
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) return; // done
        var cities = stateObject[continentSel.value][this.value];
        for (var i = 0; i < cities.length; i++) {
            citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
        }
    }
}
</script>

最后在这里查看完整的工作代码