javascript - 使用JavaScript和Jquery在下拉列表中显示后端数据

Question

我已经使用 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>

当我尝试在段落 <p> 内显示它而不使用下拉列表(即)时标签，它有效。而且在 console.log 中，它也显示正确。

Answer 1

在您的代码中 $('select').material_select(); 位于 $(document).ready(function() { 内,.这意味着它将在加载 DOM 后立即运行。

但是docClient.scan是一个异步调用。根据服务器的不同，获取数据并绑定(bind)到 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();
    }
});