CODEWITHSUNDEEP
jqueryruby-on-rails-5
John Cowan
John Cowan

Reputation: 1674

Rails and JQuery Select Drop-Down - How to Retain Selected Value

Rails: 5.0.6
Ruby: 2.3.7

I could use some pointers on how to retain a selected drop-down option when there is a validation error with a form. I'm using a rails and JQuery for this. Among other fields, I have two drop-down lists on my form. The first is populated from values in the model. For the 2nd, I populate the s with JQuery based on the user's selection in the 1st drop-down list. When a validation error happens and the form reappears, the value selected in the 2nd drop-down is not being retained. This is driving me nuts.

The first drop-down:

<%= 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 %>

This outputs these options:

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

If Area 2 is selected, a specific list of departments will populate the 2nd drop-down. Any other option will cause a 2nd/different list of departments to show. This works fine.

The 2nd select drop-down in the form:

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

The option selected will go into :requesting_department. Since I use JQuery to populate this drop-down with options based on the user's choice in another select list, I'm not using a collected list from Rails. Not sure if there is a way to do that and show options based on the 1st drop-down choice. (??)

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'));
}

Show departments:

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>");
  })

}

Everything works except being able to retain the value selected in the 2nd drop-down list What Department is this for? when there is a validation error. I've tried different things, but cannot figure it out. Any help would be greatly appreciated.

Thanks

Upvotes: 0

Views: 1114

Answers (1)

John Cowan
John Cowan

Reputation: 1674

I went with a different way, though it still using JQuery and populating one drop-down based on the selection of another. I found this Rails Cast: https://www.youtube.com/watch?v=j1zZ4Lgzf9s Seems to work for me. I did need to create a new table/model for my departments. But it is working.

Upvotes: 0

Related Questions