使用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()函數。

在選擇框被初始化之前它可以運行嗎？