如何从文本文件创建HTML下拉选择框？代码故障求助

我帮你揪出了代码里的几个关键问题，这就是下拉框没内容、控制台没输出的根源：

1. 基础语法与结构错误 #

• AJAX请求路径漏了引号：$.get(js/pytxt.txt", ...)这里开头少了双引号，应该写成$.get("js/pytxt.txt", ...)，没引号会直接触发JS语法错误，请求根本发不出去。
• 代码未闭合：$.get的回调函数和整个请求调用都没写完，for循环结束后缺少}闭合回调，最后也没加);结束$.get，导致JS代码直接中断。
• HTML结构违规：你把<form>标签放在了<head>里，这不符合HTML规范，form必须放在<body>区域内；而且<title>标签被放在了form里面，也应该移到head的最前面。

2. DOM加载时机问题 #

你的script写在<head>里，执行的时候页面上的<select id="value">还没被浏览器渲染出来，$('select#value')找不到目标元素，自然没法添加选项。解决办法要么把script移到body末尾，要么用$(document).ready()包裹代码。

3. 字符串拼接错误 #

添加option的时候，你写了'</option>"'，多了一个多余的双引号，这会导致生成的HTML结构混乱，即使添加成功也可能显示异常。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>AUTOSELECTEST</title>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
    <form method="post" action="index/display" id="first" name="first">
        <div id="page-wrap">
            <h1>Pulls from text files</h1>
            <select id="value">
                <option selected value="base">Please Select</option>
            </select>
        </div>
    </form>

    <script>
        // 等待DOM加载完成再执行代码
        $(document).ready(function() {
            $.get("js/pytxt.txt", function(data) {
                console.log('start processing text');
                console.log(data);
                var options = data.split(',');
                var $select = $('select#value');
                for (var i = 0; i < options.length; i++) {
                    // 修正字符串拼接的引号问题
                    $select.append('<option value="' + i + '">' + options[i] + '</option>');
                    console.log($select);
                }
            }).fail(function() {
                // 增加失败回调，方便排查请求问题
                console.error('加载txt文件失败，请检查路径是否正确');
            });
        });
    </script>
</body>
</html>

另外我还加了fail回调，如果请求txt文件失败（比如路径不对、文件不存在），控制台会输出错误提示，方便你排查问题。

内容的提问来源于stack exchange，提问作者jia chang