Rails和JQuery Select下拉菜单-如何保留选定的值

时间:2018-10-15 12:10:39

标签: jquery ruby-on-rails-5

Rails: 5.0.6
Ruby: 2.3.7

当表单存在验证错误时,我可以使用一些指针来指示如何保留选定的下拉选项。我为此使用rails和JQuery。在其他字段中,我的表单上有两个下拉列表。第一个是从模型中的值填充的。对于第二个,我根据第一个下拉列表中的用户选择,使用JQuery填充。发生验证错误并再次出现该表单时,将不会保留在第二个下拉列表中选择的值。这真让我发疯。

第一个下拉列表:

<%= f.label :project_id do %>What do you need help with? <span class="subtle">(required)</span>
  <%= f.select(:project_id, options_from_collection_for_select(@projects, 'id', 'name', @request.project_id ), include_blank: "-- Select --") %>
<% end %>

这将输出以下选项:

<select name="request[project_id]" id="request_project_id">
  <option value="">-- Select --</option>
  <option value="1">Area 1</option>
  <option value="2">Area 2</option>
  <option value="3">Area 3</option>
  <option value="4">Other</option>
</select>

如果选择了区域2,则特定的部门列表将填充第二个下拉列表。任何其他选项都会导致显示第二/不同部门列表。效果很好。

第二个选择下拉列表,格式:

<%= f.label :dept_id do %>What Department is this for? <span class="subtle">(required)</span>
   <%= f.select(:requesting_department, []) %>
<% end %>

所选选项将进入:requesting_department。由于我使用JQuery在另一个选择列表中使用基于用户选择的选项填充此下拉列表,因此我没有使用Rails的收集列表。不知道是否有一种方法可以根据第一个下拉选项显示选项。 (??)

jQuery

$(document).ready( function() {
   $('#request_project_id').change(function() {
      show_departments($(this));
   });
});

// show departments when page reloads, if project_id is present
if( $('#request_project_id').length > 0 ) {
  show_departments($('#request_project_id'));
} 

显示部门:

function show_departments(project){
  var project_id = project.val();
  var departments;  // array 

  if( project_id == 2 ){
    departments = [ 'Human Resources',
                    'Student Services',
                    'Marketing' ];
  }else{
    departments = [ 'Maintenance',
                    'Janitorial',
                    'Security' ];
  }

  // clear out existing list
  $('#request_requesting_department').html('');
  // prompt
  $("#request_requesting_department").append("<option value=\"\">-- Select --</option>");
  $.each(departments, function(key, value){
    $("#request_requesting_department").append("<option value=\""+value+"\">"+value+"</option>");
  })

}

除了在验证错误时能够保留在第二个下拉列表What Department is this for?中选择的值之外,其他所有方法均有效。我尝试了不同的方法,但无法弄清楚。任何帮助将不胜感激。

谢谢

1 个答案:

答案 0 :(得分:0)

我采用了另一种方式,尽管它仍然使用JQuery并根据另一个选择填充一个下拉菜单。我找到了以下Rails Cast:https://www.youtube.com/watch?v=j1zZ4Lgzf9s似乎对我有用。我确实需要为我的部门创建一个新的表/模型。但这是有效的。