使用JavaScipt和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是异步调用。根据服务器的不同，获取数据并绑定到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(); 
    } 
}); 

Answer 2

您正在运行courseList()以外的$(document).ready()函数。

在选择框被初始化之前它可以运行吗？