如何从文本文件创建html选择下拉列表



我有一个文本文件,如下所示:水果、大小、颜色

我希望能够加载文本文件,并从中创建一个动态选择下拉列表

这是我目前的代码,它不起作用。它没有在浏览器控制台中打印任何内容,选择下拉列表中也没有任何内容。有人能告诉我做错了什么吗?

下面是代码,我使用handlebar将页面呈现给用户。

<!DOCTYPE html>
<html>

<head>
<form method="post" action="index/display" id = "first" name="first">
<title>AUTOSELECTEST</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$.get(js/pytxt.txt",
function(data) {
alert( "Data Loaded: " );
console.log('start processing text')
console.log(data); /* Open the console too see the data */
var options = data.split(','),
/* Something to "explode" by. See link. */
$select = $('select#value');
for (var i = 0; i < options.length; i++) {
$select.append('<option value="' + i + '">' + options[i] + '</option>"');
console.log ($select)
});
</script>
</head>
<body>
<div id="page-wrap">
<h1>Pulls from text files</h1>
<select id="value">
<option selected value="base">Please Select</option>
</select>
</div>
</body>
</html>

我已经调试了代码,请在下面尝试

<!DOCTYPE html>
<html>

<head>
<title>AUTOSELECTEST</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$.get(/public/js/pytxt.json",
function(data,error) {
if (error) {
console.log (error);
}
alert( "Data Loaded: " );
console.log('start processing text')
console.log(data); /* Open the console too see the data */
var options = JSON.parse(data);
/* Something to "explode" by. See link. */
for (i in options) {
$("#value").append('<option value="' + options[i] + '">' + i + '</option>');
}
});
</script>
</head>
<body>
<div id="page-wrap">
<h1>Pulls from text files</h1>
<select id="value">
<option selected value="base">Please Select</option>
</select>
</div>
</body>
</html>

最新更新