How to populate HTML drop down with Text File using JavaScript?
Question
I have been stuck on this problem for a while now, Basically i want to populate the below select with option group and option check boxes. The text file imports to JS just fine, i'm getting the problem trying to populate the drop down. Here is my HTML:
function LoadTxtFile(p) { var AllTxtdata = ''; var targetFile = p.target.files[0]; if (targetFile) { // Create file reader var FileRead = new FileReader(); FileRead.onload = function (e) { if (FileRead.readyState === 2) { AllTxtdata = FileRead; // Split the results into individual lines var lines = FileRead.result.split('\\n').map(function (line) { return line.trim(); }); var select = $("#MySelect"); var optionCounter = 0; var currentGroup = ""; lines.forEach(function (line) { // If line ends it " -" create option group if (line.endsWith(" -")) { currentGroup = line.substring(0, line.length - 2); optionCounter = 0; select.append("<optgroup id'" + currentGroup + "' label='" + currentGroup + "'>"); // Else if the line is empty close the option group } else if (line === "") { select.append("</optgroup>"); // Else add each of the values to the option group } else { select.append("<option type='checkbox' id='" + (currentGroup + optionCounter) + "' name'" + (currentGroup + optionCounter) + "' value='" + line + "'>" + line + "</option>"); } }); } } FileRead.readAsText(targetFile); } } document.getElementById('file').addEventListener('change', LoadTxtFile, false);
<html> <body> <select name="MySelect" id="MySelect"/> </body> </html>
1 answers
solution1
1 ACCPTED 2018-03-13 00:26:19
I believe you are using append incorrectly as you are dealing with partial nodes with the optgroup . I would build the html snippet then append it in one go. This would also bring a performance benefit as multiple DOM manipulations can get expensive.
I'd do something like the following.
function LoadTxtFile(p) {
var AllTxtdata = '';
var htmlString = '';
//Optional Templates. I find them more readable
var optGroupTemplate = "<optgroup id='{{currentGroup}}' label='{{currentGroup}}'>";
var optionTemplate = "<option type='checkbox' id='{{currentGroupCounter}}' name='{{currentGroupCounter}}' value='{{line}}'>{{line}}</option>";
var targetFile = p.target.files[0];
if (targetFile) {
// Create file reader
var FileRead = new FileReader();
FileRead.onload = function (e) {
if (FileRead.readyState === 2) {
AllTxtdata = FileRead;
// Split the results into individual lines
var lines = FileRead.result.split('\n').map(function (line) {
return line.trim();
});
var select = $("#MySelect");
var optionCounter = 0;
var currentGroup = "";
lines.forEach(function (line) {
// If line ends it " -" create option group
if (line.endsWith(" -")) {
currentGroup = line.substring(0, line.length - 2);
optionCounter = 0;
htmlString += optGroupTemplate.replace("{{currentGroup}}", currentGroup);
// Else if the line is empty close the option group
} else if (line === "") {
htmlString +="</optgroup>";
// Else add each of the values to the option group
} else {
//I'm assuming you want to increment optionCounter
htmlString += optionTemplate.replace("{{currentGroupCounter}}", currentGroup + optionCounter).replace("{{line}}", line);
}
});
select.append(htmlString);
}
}
FileRead.readAsText(targetFile);
}
}
document.getElementById('file').addEventListener('change', LoadTxtFile, false);
NOTE the above is untested and may need some debugging.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.