在Ruby on Rails表单中，select和onChange的使用方法是什么？

Question

我浏览了所有关于这个主题的stackoverflow问题和答案，但我仍然无法让我的场景工作。当选择下拉菜单选项时，我想触发一个点击按钮动作；看起来很简单，而且应该是使用AJAX非常常见的操作。

以下是我代码中相关的节选：

<%= form_for(@test, :html => {:id => "form_id", :name => "MyForm", :remote => "true"}) do |form| %>
    <%= form.label "Menu1" %>
    <%= form.select (:Menu1, [["Option1","value1"],["Option2","value2"]], :html_options=>{:onChange=>"javascript: this.form.apply_button_name.click();"}) %>

    <!-- more select menus and text fields here -->

    <div class="actions">
        <%= form.submit "Apply", :name => "apply_button_name", :remote => "true" %>
    </div>
<% end %>

我在表单和按钮中都使用了":remote => "true"，因为这是让AJAX工作的唯一方式。我也尝试过带有明确的"html_options"和"javascript:"，因为我看到一些SO答案建议这样做，但没有帮助。我还尝试了onSelect和onClick而不是onChange，但仍然没有成功。

生成的HTML如下所示：

    Menu1
    <select id="test_Menu1" name="test[Menu1]"><option value="value1">Option1</option>
<option value="value2" selected="selected">Option2</option></select>

正如您所看到的，HTML代码中没有onChange事件处理程序; 为什么？有人看出我做错了什么吗？

感谢任何帮助。

- rh4games

Answer 1

修改你的form.select调用，像这样：

<%= form.select :Menu1, [["Option1","value1"],["Option2","value2"]], {}, 
                :onChange=>"javascript: this.form.apply_button_name.click();" %>

- rabusmar

---

谢谢 rabusmar，这很有帮助，但是当我选择选项1时，控制器获取了值2，反之亦然。我添加了第三个选项，似乎控制器没有获取我刚刚选择的选项，而是上一个！为什么会这样？我通过在控制器中添加 puts "@test.Menu1 = " + @test.Menu1.to_s + "\n" 进行了检查。 - rh4games

这是因为在表单发送时该值尚未设置。您可以在处理程序中使用setTimeout，以便您发送正确的值。 - rabusmar

我可以问一下，如何引用一个在这个文件之外的JavaScript，而不是内联的JavaScript？ - Orz

Answer 2

如果您查看文档：

API Dock Ruby on Rails select

您会发现select表单助手采用以下形式：

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

如果您没有向选项哈希传递任何内容（在您的情况下这将是一个空哈希），则该表单认为您的html_options哈希是您的选项哈希，并且会感到困惑。

检查的一种方法是添加类似于“{:onchange=>“alert('Hello');”}”这样的内容，然后查看事件是否成功触发，或者在实际网页中右键单击选择元素并进行检查。如果html中没有onchange选项，则意味着您的Rails表单助手确实将html_options与其他选项混淆了。因此，您应该有：

<%= form.select (:Menu1, [["Option1","value1"],["Option2","value2"]], {}, {:onChange=>"handler();"} %>

确保在HTML选项之前包含空哈希(#)，然后你应该没问题了。我认为你甚至不需要你现在所拥有的HTML选项和JavaScript代码。

最后，如果onChange不起作用，请尝试使用小写的onchange。

- AmitF