我是前端开发的新手，并试图向自己介绍一下。
我在理解如何用文件中的数据填充下拉框时遇到一些困难。
我正在使用node和javascript。我现在不使用任何其他软件包，也不想使用任何其他软件包。我已经阅读了很多有关此的文章，并看到了许多有关Express，jquery，php的内容，但是我还没有准备好去那里。我现在想暂时将其保留在node和javascript上。
我有一个简单的页面，它将具有一个带有时间值列表的选择框。然后，用户将选择“时间”之一，然后我将进行其他一些处理。我可以按如下所示填充选择框：
html
Public Function StrSort(ByVal sInp As String, _
Optional bDescending As Boolean = False) As String
' sorts a comma-delimited string
Dim asSS() As String ' substring array
Dim sSS As String ' temp string for exchange
Dim n As Long
Dim i As Long
Dim j As Long
asSS = Split(sInp, ",")
n = UBound(asSS)
'First, we are gonna sort Numeric values from every other type of value.
'The numeric values are going to be stored in an array containing only numeric values
Dim TemporaryNumberArray() As Double
For i = 0 To n
If IsNumeric(Trim(asSS(i))) Then
On Error Resume Next
If IsError(UBound(TemporaryNumberArray)) Then
ReDim TemporaryNumberArray(0 To 0)
Else
ReDim Preserve TemporaryNumberArray(0 To UBound(TemporaryNumberArray) + 1)
End If
On Error GoTo 0
TemporaryNumberArray(UBound(TemporaryNumberArray)) = asSS(i)
End If
Next
n = UBound(TemporaryNumberArray)
'Now, we are going to sort the numbers array.
If n < 1 Then
StrSort = sInp
Else
For i = 0 To n - 1
For j = i + 1 To n
If (TemporaryNumberArray(j) < TemporaryNumberArray(i)) Xor bDescending Then
sSS = TemporaryNumberArray(i)
TemporaryNumberArray(i) = TemporaryNumberArray(j)
TemporaryNumberArray(j) = sSS
End If
Next j
Next i
'Now, we are building the return string that contains the numbers in order
StrSort = CStr(TemporaryNumberArray(0))
For i = 1 To n
StrSort = StrSort & ", " & CStr(TemporaryNumberArray(i))
Next
End If
'Finally, we are going to append the non-numeric values at the end, in the same order as they appear in the input string
If n < UBound(asSS) Then
For i = 0 To UBound(asSS)
If Not IsNumeric(asSS(i)) Then
StrSort = StrSort & ", " & asSS(i)
End If
Next
End If
End Function
app.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Book Viewer</title>
<link href="https://fonts.googleapis.com/css?family=Caveat|Open+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<script src="loadQuoteTimes.js" defer></script>
</head>
<body>
<header>
</header>
<form action="/submit-time" method="post">
<div id="timeInfo">
<fieldset>
<select class="timeList" name="searchTime"></select>
<button>Submit</button>
</fieldset>
</div>
</form>
</body>
<footer>
</footer>
</html>
loadQuoteTimes.js
var http = require('http');
var fs = require('fs');
var server = http.createServer(function (req, resp) {
console.log("request method: " + req.method);
if (req.method === 'POST') {
req.on('data', function (data) {
console.log("POST invoked: " + data);
data = data.toString();
data = data.split('=');
if (data[0] === 'searchTime') {
console.log("Time to search for: " + data[1]);
}
}
);
}
/* I realize I need to check to see if I am doing a GET before I get into this switch... */
switch (req.url) {
case "/submit-form":
break;
case "/index.html", "/":
console.log("HTML");
fs.readFile("index.html", function (error, pgResp) {
if (error) {
resp.writeHead(404);
resp.write('Contents you are looking are Not Found');
} else {
resp.writeHead(200, { 'Content-Type': 'text/html' });
resp.write(pgResp);
}
resp.end();
});
break;
case "/css/styles.css":
console.log("CSS");
fs.readFile("css/styles.css", function (error, pgResp) {
if (error) {
resp.writeHead(404);
resp.write('Contents you are looking are Not Found');
} else {
resp.writeHead(200, { 'Content-Type': 'text/css' });
resp.write(pgResp);
}
resp.end();
});
break;
case "/loadQuoteTimes.js":
console.log("loadQuoteTimes");
fs.readFile("loadQuoteTimes.js", function (error, pgResp) {
if (error) {
resp.writeHead(404);
resp.write('Contents you are looking are Not Found');
} else {
resp.writeHead(200, { 'Content-Type': 'text/js' });
resp.write(pgResp);
}
resp.end();
});
console.log("load quote times finished");
break;
case "/submit-time":
break;
case "/index.html?productKey=ff":
console.log("product key request");
break;
default:
resp.writeHead(404);
resp.write("Contents not found: " + req.url);
console.log("contents not found: " + req.url);
break;
}
}).listen(80);
console.log('Server Started listening on 80');
使用上面的代码做出选择时，我可以显示列表，还可以获取选择的项目。但是，这仅用于静态列表。除了硬编码数据外，我还无法弄清楚如何用该填充列表。我的直觉告诉我我需要对/.index.html加载进行一些操作，但是我还没有找到魔术。
有人可以指出我的方向还是告诉我我是否完全在错误的树上吠叫。
预先感谢
答案 0 :(得分：0)
我想出了一个非常丑陋的方法。本质上，您可以制作每行javascript并发送回浏览器。我用以下代码替换了switch语句中的loadQuoteTimes.js案例：
case "/loadQuoteTimes.js":
// reference the html select item
var hd = "var ul = document.querySelector\(\"select.timeList\"\)\;";
resp.write(hd);
var li;
// currently just hard coding values to get the code to work. Replace below loop with
// a collection of something read from file or database
for (var i = 0; i < 5; i++) {
li = "var listItem = document.createElement\(\"option\"\)\;" + "\n";
resp.write(li);
li = "listItem.value = " + i + "\;" + "\n";
resp.write(li);
li = "listItem.textContent = \"09:00:00.001\"\;" + "\n";
resp.write(li);
li = "ul.appendChild\(listItem\)\;" + "\n";
resp.write(li);
}
resp.end();
break;