Question

我一直坚持这个问题一段时间了，基本上我想用选项组和选项复选框填充下面的选项。文本文件导入JS就好了，我在尝试填充下拉列表时遇到了问题。这是我的HTML：

＆＃13;

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

＆＃13;

<html>
<body>


     <select name="MySelect" id="MySelect"/>

</body>
</html>

＆＃13;

Answer 1

我认为您在使用append处理部分节点时错误地使用optgroup。我会构建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 个答案: