Question

实际上，在使用渲染模板添加动态内容时我遇到了问题。

Popover Call：

$(selectorId).popover({
        placement: 'bottom',
        title: 'New Post',
        html: 'true',
        content: _template,
        container: 'body',
});

呈现HTML模板

<div>
     <label>Name</label><input type="text" name="name" id="name" />
     <label>Message</label><input type="text" name="message" id="messgae" />
     <label>Select Article</label><select name="article" id="article"></select> 
     <input type="button" value="submit">
</div>

只需关注“文章”。选择框在模板中为空，在渲染后我试图附加文章数据，但它不起作用。

将数据从db添加到选择框

$.each(articles,function(){
   $("#article").append(this.articleName);
});

文章是JSON数组

[
  {
       'id': 1,
       'articleName': 'article1'

  },
  {
       'id': 2,
       'articleName': 'article2'

  },
  {
       'id': ,
       'articleName': 'article3'

  }
]

问题：选择框显示为空。

目标：每当打开弹出框时，用户都可以从选择框中选择文章。

Answer 1

您要将文章名称附加到选择框，而您应将选项附加到html

所以它应该是这样的：

$.each(articles,function(){
   $("#article").append("<option value='"+this.articleName+"'>"+this.articleName+"</option>");
});

<强>更新

另一个问题可能是您尝试将选项附加到选择框，而页面上尚不存在。因此，如果您将模板作为字符串附加（通过'content'属性），您最初可以使用必要的选择选项组成模板：

var _template = "<select>";
$.each(articles,function(){
     _template +="<option value='"+this.articleName+"'>"+this.articleName+"</option>";
};
_template+= "</select>";

或者您也可以使用'container'属性并传递

在呈现的引导程序弹出模板中添加动态内容

1 个答案: