使用JavaScipt和Jquery在下拉列表中显示后端数据
我用materializecss创建了前端,并从aws获取后端数据。在这里,我想将aws中的项目列表显示到我的前端下拉列表中。但是,它完全空白,并且在下拉列表中看不到任何数据。使用JavaScipt和Jquery在下拉列表中显示后端数据
下面是我的代码:
<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>
当我第<p>
标签内试图显示它不下拉列表(即),它的工作原理。而且在console.log中,它显示正确。
在您的代码中$('select').material_select();
位于$(document).ready(function() {
之内。这意味着它将在加载DOM
后立即运行。
但是docClient.scan
是异步调用。根据服务器的不同,获取数据并绑定到select
需要一些时间。
所以,你应该您select
填充后运行你的元素上.material_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();
}
});
您正在运行courseList()
以外的$(document).ready()
函数。
在选择框被初始化之前它可以运行吗?
这不提供一个问题的答案,应该是一个评论。请参阅[我应该何时评论?](https://*.com/help/privileges/comment)。 一旦你有足够的[声望](https://*.com/help/whats-reputation),你将可以在任何帖子上[评论](https://*.com/help/privileges/comment);相反,[提供不需要提问者澄清的答案](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can- I-DO-代替)。 – Dwhitz
移动'$( '选择')material_select();'下面'data.Items.forEach((){});'块 – adiga
冷却。有效。你能解释一下吗? –
更新了具体细节的答案。 – adiga