为rails collection_select添加多个选项值

时间:2015-11-30 03:10:39

标签: jquery ruby-on-rails ruby forms

我正在努力将多个选项值添加到带有集合选择的rails表单中,我想知道用我的表单设置它的最佳方法是什么。

我目前有一个下拉表单,用户可以在其中选择一个班级和一个学生,然后点击提交以转到包含特定选项和信息的页面以及基于所选学生的其他表单。这是我为该表单编写的代码:

<%= form_for :student do |f| %>
  <div class="field form-group">
    <p>Select your cohort.</p>
    <%= f.label :cohort %>
    <%= collection_select(:student, :cohort_id,
          Cohort.order('name DESC'), :id, :name,
          { :include_blank => "Cohorts" },
          { class: "form-control", id: "cohort-dropdown" })
    %>
  </div>

  <div class="field form-group">
    <p>Select your name.</p>
    <%= f.label :name %>
    <%= collection_select(:student, :id,
          Student.order('name ASC'), :id, :name,
          { include_blank: "Students" },
          { class: "form-control", id: "student-by-cohort-dropdown" })
    %>
  </div>

  <div class="actions">
    <%= f.submit "View Student", :class => "btn btn-default"%>
  </div>
<% end %>

从此表单传递的参数样本如下:

{"utf8"=>"✓",
"authenticity_token"=>"ye65JZ/hjvpy58XQ5qAMe9oEQUuMdZjMaRn3dcYJhM/7R/1uGL9eAfJdX4A7rf6lvPUwyhVAnf7KItI9Xv+VSg==",
"student"=>{"id"=>"25"},
"commit"=>"Sign Up",
"controller"=>"welcome",
"action"=>"create"}

我想将其设为动态下拉表单,以便在您选择同类群组时,学生下拉表单只会包含该班级中学生的姓名。为此我编辑了以上表格,学生收藏选择为:

<%= collection_select(:student, :cohort_id, 
      Student.order('name ASC'), :cohort_id, :name,
      { include_blank: "Students" },
      { class: "form-control", id: "student-by-cohort-dropdown" })
%>

并添加了以下jquery函数以使下拉表格动态化:

function filterStudentByCohortListener(){
  var students = $("#student-by-cohort-dropdown").html();

  $("#cohort-dropdown").change(function() {
    var cohortID = $("#cohort-dropdown option:selected").val();
    var filterBy = "option[value='" + cohortID + "']";
    var options = $(students).filter(filterBy)

    if(cohortID != "") {
      $("#student-by-cohort-dropdown").html(options).prepend("<option value>Students</option>");
    }
  });
}

这很棒!当然,除了现在,通过的参数是:

{"utf8"=>"✓",
"authenticity_token"=>"ye65JZ/hjvpy58XQ5qAMe9oEQUuMdZjMaRn3dcYJhM/7R/1uGL9eAfJdX4A7rf6lvPUwyhVAnf7KItI9Xv+VSg==",
"student"=>{"cohort_id"=>"1"},
"commit"=>"Sign Up",
"controller"=>"welcome",
"action"=>"create"}

这意味着我无法在该控制器方法中找到我的学生,因为我无法访问个别学生的ID,只有他们的cohort_id(我需要设置动态下拉表格)。我一直试图找到一种方法来创建多个选项,以便为学生下拉列表而不是当前的html(下面的示例):

<select class="form-control" id="student-by-cohort-dropdown" name="student[cohort_id]">
  <option value="">Students</option>
  <option value="4">Suzy Peterson</option>
  <option value="3">Sally Johnson</option>
  <option value="1">Adam Smith</option>
</select>

我改为喜欢:

<select class="form-control" id="student-by-cohort-dropdown" name="student[id]">
  <option value="">Students</option>
  <option value="1" cohort_id="1">Suzy Peterson</option>
  <option value="25" cohort_id="2">Sally Johnson</option>
  <option value="16" cohort_id="1">Adam Smith</option>
</select>

这样我就可以获得params的学生ID和下拉列表的cohort_id。我已经搜索过并尝试应用以下资源(以及其他资源)中的信息:

ruby on rails f.select options with custom attributes

Rails Formtastic: adding "data-" field to option tag

Can someone explain collection_select to me in clear, simple terms?

http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html

https://www.ruby-forum.com/topic/93662

但我似乎无法为我工作,我觉得我的表单设置与这些示例中的表单有点不同,所以我无法应用我在那里看到的信息。我希望得到一些关于如何设置我的多个选项值的建议,我猜我需要在我的第一个选项哈希(我已经放置{include_blank: "Students"}的那个)中添加一些东西但是没有我的尝试似乎能够抓住所选学生的身份证,所以任何建议都会非常感激。谢谢!

2 个答案:

答案 0 :(得分:0)

这可以通过两步(两个控制器和两个表单)而不是一个步骤来大大简化,并且它不需要任何javascript。

在第一步中,学生将从下拉列表中选择一个队列,然后单击“下一步”。在第二步中,所选队列中的学生将填充下拉列表。如果您在学生选择表单中包含一个带有同类ID的隐藏字段,您将把两个ID发送到您选择的第三个控制器。

将来,当您的需求发生变化时,这也会更容易修改。

答案 1 :(得分:0)

此问题(您链接到)的评分最高的答案可以回答您的问题:https://stackoverflow.com/a/6374301/179125

这只是产生这样一个数组的问题:

[ [ "Suzy Peterson",  1, { 'data-cohort-id' => 1 },
  [ "Sally Johnson", 25, { 'data-cohort-id' => 2 },
  [ "Adam Smith",    16, { 'data-cohort-id' => 1 },
  # ...
]

...然后将该数组传递给options_for_select。在你的情况下,看起来像下面的内容。

在您的控制器中(不要在您的视图中执行ActiveRecord查询):

@students = Student.order('name ASC')

在您看来:

<%
  student_options = @students.map do |s|
    [ s.name, s.id, { 'data-cohort-id' => s.cohort_id } ]
  end
%>
<%= select(:student, :id, options_for_select(student_options),
      { include_blank: "Students" }, { class: "form-control", id: "student-by-cohort-dropdown" })
%>

这将呈现如下HTML:

<select class="form-control" id="student-by-cohort-dropdown" name="student[id]">
  <option value="">Students</option>
  <option value="1" data-cohort-id="1">Suzy Peterson</option>
  <option value="25" data-cohort-id="2">Sally Johnson</option>
  <option value="16" data-cohort-id="1">Adam Smith</option>
</select>

当然,您可以将视图逻辑压缩成一行,但对于尝试阅读您的代码的下一个人(包括您自己)来说,这将是非常不友好的。