使用 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 &lt;p&gt; 标记内显示它时,它可以工作。而且在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 调用落在错误函数上

javascript-jquery介绍

Jquery能实现所有javascript的功能吗

如何将带有波浪号的相对路径渲染到 jquery/javascript 中相对路径的 ../../ 中?

使用 click() 在 jQuery 中调用函数

如何在jquery或javascript中设置函数调用的顺序或优先级?