CODEWITHSUNDEEP
javascriptjqueryhtmlruby-on-railsruby
mtcrts70
mtcrts70

Reputation: 35

Dynamic Dropdown Menus Ruby on Rails form_for

Below is a JSFiddle for what I'm trying to accomplish:

https://jsfiddle.net/sherali/jkw8fxzf/12/

HTML:

<select id="first-choice">
   <option value="English">English</option>
   <option value="Spanish">Spanish</option>
</select>

<select id="second-choice">
   <option value="Spanish">Spanish</option>
   <option value="English">English</option>
</select>

JS:

var $secondOption= $('#second-choice>option').clone();

$("#first-choice").change(function() {
    var userSelected = $(this).val();

    $('#second-choice').html($secondOption);

   // $("#second-choice").val(userSelected)
    $('#second-choice option[value="'+userSelected+'"').remove()
});

I'm trying to take the above code which works and convert it to something that has the same behavior when using the rails form_for method shown below:

<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
 <%= f.label :natives_language, "Native Language" %>
 <%= f.select :natives_language, [ 'Spanish', 'English'], :class => "first-choice"  %>

 <%= f.label :next_language, "I Want To Learn" %>
 <%= f.select :next_language,  [ 'English', 'Spanish'], :class => "second-choice" %>
<% end %>

Which produces the following html:

<label for="user_natives_language">Native Language</label>
<select id="user_natives_language" name="user[natives_language]"> 
  <option value="English">English</option>
  <option value="Spanish">Spanish</option>
</select>

<label for="user_next_language">I Want To Learn</label>
<select id="user_next_language" name="user[next_language]">
  <option value="Spanish">Spanish</option>
  <option value="English">English</option>
</select>

It doesn't look like the classes first-choice and second-choice are being added for some reason. Any thoughts on how to get this to work?

Thanks and regards.

Upvotes: 0

Views: 162

Answers (1)

panmari
panmari

Reputation: 3847

Reading the doc for select, you can see that it accepts parameters in the following order:

select(object, method, choices = nil, options = {}, html_options = {}, &block)

Since what you want to pass is clearly an html option, you might want to use something like

<%= f.select :next_language,  [ 'English', 'Spanish'], {}, {:class => "second-choice"} %>

effectively passing an empty hash as options, then your customized class as html_options. Similar for your other line.

Upvotes: 1

Related Questions