Html 与选择框链接的活动记录查询

我正在使用活动记录查询按类型对值进行分组并求平均值。每个分组类型都有一个不同的平均值。我现在能够显示所有不同的平均值。我计划将javascript与选择框结合使用，一次只显示一个平均值。我应该如何设置我的选择框，以便当用户从下拉列表中选择类型时，它只显示查询中相应的平均值

例如：共有5组（A、B、C、D和E组）。每个小组都有多个成员，每个成员都得到两分。每组的整体平均得分分别为a:65和40，B:72和80，C:73和65，D:84和21，E:91和31。我希望用户能够从下拉列表中选择一个组，并让应用程序只显示相应的平均值

在模型中：

def average_groupscore
     scores.select("AVG(scoreone) as avg_score, AVG(scoretwo) as avg_scoretwo, groupa").group("groups")
end 

他认为：

<% @groupscore.each do |item| %>
     <div id="groupscore1"><%= item.avg_score.round %></div>
     <div id="groupscore2"><%= item.avg_scoretwo.round %></div>
<% end %>

HTML数据属性

<% @groupscore.each do |item| %>
     <div data-groupscore=1><%= item.avg_score.round %></div>
     <div data-groupscore=2><%= item.avg_scoretwo.round %></div>
<% end %>

（不是最好的Javascript，但完成了任务-隐藏所有内容，然后显示所选内容）

或者，你也可以承担更重的责任，开始使用AJAX和HTML替换、客户端MVC等

$('groupSelect').on('change', function() {
  $('[data-groupscore]').each( function(index, element) {
    element.style.display = 'none'
  })
  group = $('#groupSelect')[0].value //Get the value of your select box
  $('[data-groupscore='+group+']').each( function(index, element) {
    element.style.display = 'block'
  })
})