0

実際、レンダリングされたテンプレートで動的コンテンツを追加しているときに問題に直面しています。

ポップオーバー コール:

$(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>

「記事」に集中するだけです。テンプレートの選択ボックスが空で、レンダリング後に記事データを追加しようとしていますが、機能しません。

データベースから選択ボックスにデータを追加する

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

記事は JSON 配列です

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

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

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

  }
]

問題: 選択ボックスに何も表示されません。

目標: ポップオーバーが開かれるたびに、ユーザーは選択ボックスから記事を選択できるようになります。

4

1 に答える 1

0

選択ボックスに記事名を追加していますが、そこにオプションをhtmlとして追加する必要があります

したがって、次のようになります。

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

アップデート：

もう 1 つの問題は、ページにまだ存在しない選択ボックスにオプションを追加しようとしている可能性があります。そのため、テンプレートを文字列として ('content' プロパティを介して) 追加する場合は、最初に必要な選択オプションを使用してテンプレートを構成できます。

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

または、「コンテナ」プロパティを使用して渡すこともできます

于 2013-06-18T07:42:14.337 に答える