如何使用JavaScript使用文本文件填充HTML下拉列表？

Question

我已經在這個問題上停留了一段時間，基本上，我想在下面的選擇中填充選項組和選項復選框。 文本文件導入到JS就很好了，我在嘗試填充下拉菜單時遇到了問題。 這是我的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>

Answer 1

我相信您在使用optgroup處理部分節點時會錯誤地使用append 。 我會建立html片段，然后一口氣將其附加。 這也將帶來性能上的好處，因為多種DOM操作可能會變得昂貴。

我會做類似以下的事情。

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

注意以上內容未經測試，可能需要調試。

如何使用JavaScript使用文本文件填充HTML下拉列表？

問題描述

1 個解決方案

解決方案1
1 已采納 2018-03-13 00:26:19

如何使用JavaScript使用文本文件填充HTML下拉列表？

問題描述

1 個解決方案

解決方案1 1 已采納 2018-03-13 00:26:19

解決方案1
1 已采納 2018-03-13 00:26:19