javascript - 使用nodeJS创建依赖下拉菜单过滤器
问题描述
我需要在网页上创建两个下拉菜单 - (第二个下拉菜单取决于第一个下拉菜单) - 并使用来自 .csv 文件的两个不同列的记录填充这两个菜单。
我可以使用 NodeJS 读取 csv 文件,并将所需的列都放入两个不同的数组中,如下所示:
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)
});
现在我需要做两件事:首先,我需要在网页上的两个不同下拉菜单中填充这两个不同的数组。CountryName 应该进入第一个下拉菜单,CityName 应该进入第二个下拉菜单。我的理解是浏览器无法读取终端的输出,所以我们需要使用 Express.JS 设置服务器。我怎样才能做到这一点?
其次,正如我已经提到的,第二个下拉记录应该依赖于第一个,我们如何映射/链接两个数组?例如,当我在第一个下拉菜单中选择意大利时,只有意大利城市(米兰、威尼斯、罗马等)应该显示在第二个下拉菜单中。如果我选择西班牙,下拉菜单中应该只显示西班牙城市(马德里、巴塞罗那等)。
作为参考,下拉菜单应该是这样的
我是 NodeJS 的新手,任何帮助都将不胜感激。谢谢。
解决方案
你在这里问了两个问题。一是如何使用快递。另一个是如何实现依赖下拉。也许这应该是两个不同的问题,但让我在这里解决每个问题。一、我们如何使用express(这是一个用node写的web服务器)
一、如何使用快递
- 将 express 安装在您选择的目录中(有关详细信息,请参阅链接)
$ npm install express --save
- 创建一个新的 javascript 文件
- 使用下面的代码
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 或其他软件包来安装 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>
最后在这里查看完整的工作代码
推荐阅读
- django - Django 中的画廊
- r - 如何模拟 10^5 组 51 次抛掷
- mysql - MySQL COUNT IF 不工作并给出全 0
- java - 奇怪的事情发生在for循环中,java
- import - 将任意数据添加到 Maya 场景中,无需打开整个文件即可读回
- javascript - 在获取 setInterval(...) 的 java 脚本中的 setTimeout 方法中调用 setInterval 函数不是函数错误
- swift - 在 Xcode SpriteKit 场景编辑器中向实体添加自定义 GKComponent 会将 GKScene.rootNode 设置为 nil
- c++ - 创建包含项目名称、数量和总价的收据
- python - 将文本输出与 BeautifulSoup 结合起来
- readfile - mql4 - 如何将 .txt 文件读入 mql 变量