javascript - 动态下拉菜单 Ruby on Rails form_for

Question

下面是我想要完成的任务的 JSFiddle:

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

我试图采用上面有效的代码，并将其转换为使用如下所示的 Rails form_for 方法时具有相同行为的代码:

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

生成以下 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>

由于某种原因，第一选择和第二选择类(class)似乎没有被添加。关于如何让它发挥作用有什么想法吗？

感谢和问候。

Answer 1

阅读doc for select ，您可以看到它按以下顺序接受参数:

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

由于您想要传递的显然是一个 html 选项，因此您可能需要使用类似的内容

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

有效地传递一个空散列作为选项，然后将您的自定义类传递为 html_options。与您的其他线路类似。