使用 JavaScript 和 Jquery 在下拉列表中显示后端数据
Posted
技术标签:
【中文标题】使用 JavaScript 和 Jquery 在下拉列表中显示后端数据【英文标题】:Displaying the backend data in dropdown list using JavaScript and Jquery 【发布时间】:2018-02-23 03:48:56 【问题描述】:我已经使用 materializecss 创建了前端,并且正在从 aws 获取后端数据。在这里,我想显示从 aws 到我的前端下拉列表的项目列表。但是,它是完全空白的,在下拉列表中看不到任何数据。
下面是我的代码:
<div class="row">
<div class="input-field col s12">
<select id="entries">
<option value="0">- Select -</option>
</select>
<label>Course</label>
</div>
</div>
<script>
$(document).ready(function()
$('select').material_select();
$('.datepicker').pickadate(
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year,
today: 'Today',
clear: 'Clear',
close: 'Ok',
closeOnSelect: false // Close upon selecting a date,
);
);
$('#textarea1').val('New Text');
$('#textarea1').trigger('autoresize');
courseList();
function courseList()
AWS.config.region = 'us-west-2';
AWS.config.update(
accessKeyId: 'aaaaaaaaaaa',
secretAccessKey: 'aaaaaaaaaaa'
);
var docClient = new AWS.DynamoDB.DocumentClient();
let scanPar =
TableName: 'course',
Limit: 100
;
docClient.scan(scanPar, function(err, data)
if (err)
console.log(err, null);
else
console.log(null, data);
data.Items.forEach(function(courseEntry)
$('#entries').append('<option>' + courseEntry.title + '</option>');
);
);
</script>
当我试图在没有下拉列表的情况下(即)在 para <p>
标记内显示它时,它可以工作。而且在console.log中也显示正确。
【问题讨论】:
将$('select').material_select();
移动到data.Items.forEach(() );
块下方
酷。有效。你能解释一下吗?
用详细信息更新了答案。
【参考方案1】:
在您的代码中,$('select').material_select();
在 $(document).ready(function()
内部。这意味着它将在 DOM
加载后立即运行。
但是docClient.scan
是一个异步调用。根据服务器的不同,获取数据并绑定到select
需要一些时间。
所以,你应该在你的元素上运行.material_select()
在你的select
被填充之后。
docClient.scan(scanPar, function(err, data)
if (err)
console.log(err, null);
else
console.log(null, data);
data.Items.forEach(function(courseEntry)
$('#entries').append('<option>' + courseEntry.title + '</option>');
);
$('select').material_select();
);
【讨论】:
【参考方案2】:您在 $(document).ready()
函数之外运行 courseList()
。
是否可以在选择框初始化之前运行?
【讨论】:
这不提供问题的答案,应该是评论。请参阅When should I comment?。一旦你有足够的reputation,你就可以在任何帖子上comment;相反,provide answers that don't require clarification from the asker.以上是关于使用 JavaScript 和 Jquery 在下拉列表中显示后端数据的主要内容,如果未能解决你的问题,请参考以下文章
从节点 JavaScript 返回到 jQuery 的 Ajax 调用落在错误函数上