Bootstrap 3下拉框填充问题：仅显示第一条评论而非全部

嘿，我明白你的困扰了——你的下拉框只显示第一条评论，核心问题出在HTML结构的嵌套和循环位置错误上，咱们来一步步修复：

问题根源分析 #

你原来的视图代码把<ul class="dropdown-menu">和.dropdown的闭合标签</div>都放在了@comments.each循环内部，这会导致：

• 每匹配到一条评论，就会生成一个全新的下拉菜单容器，而不是把所有评论放在同一个下拉框里
• 第一次循环就提前闭合了外层的.dropdown容器，后续的评论代码根本不会被正确渲染到页面中

修正后的前端视图代码 #

先把下拉菜单的容器<ul>移到循环外面，确保所有匹配的评论都放在同一个下拉列表里，同时修正HTML标签的闭合顺序：

<div class="dropdown"> 
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Comments <span class="caret"></span></button> 
  <!-- 下拉菜单容器放在循环外面 -->
  <ul class="dropdown-menu"> 
    <% @comments.each do |z| %> 
      <% if z.post_id == post.id %> 
        <li><%= z.body %></li> 
      <% end %> 
    <% end %> 
  </ul> 
<!-- 最后再闭合下拉容器 -->
</div>

更高效的优化方案（可选） #

原来的控制器加载所有评论再在视图里过滤，会产生不必要的性能开销（N+1查询问题），咱们可以优化控制器和视图，直接关联帖子的评论：

优化后的控制器代码 #

class StaticPagesController < ApplicationController 
  def index 
    # 预加载每个帖子的关联评论，避免重复查询数据库
    @posts = Post.all.order(created_at: :desc).includes(:comments) 
    @comment = Comment.new 
  end 
end

对应优化后的视图代码 #

直接通过帖子的关联关系获取评论，不用再遍历所有评论做判断：

<div class="dropdown"> 
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Comments <span class="caret"></span></button> 
  <ul class="dropdown-menu"> 
    <% post.comments.each do |comment| %> 
      <li><%= comment.body %></li> 
    <% end %> 
  </ul> 
</div>

这样不仅解决了下拉框只显示一条评论的问题，还让代码更简洁，同时提升了页面加载性能。

内容的提问来源于stack exchange，提问作者Jacob Moore