Ruby on Rails 表单中的 select 和 onChange

Posted 2023-03-11

【中文标题】Ruby on Rails 表单中的 select 和 onChange

【英文标题】：select and onChange in a Ruby on Rails form

【发布时间】：2012-01-31 05:00:39

【问题描述】：

我浏览了有关此主题的所有 SO 问题和答案，但我仍然无法使我的方案工作。 我想在选择下拉菜单选项时触发单击按钮操作；看起来很简单，在 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 事件处理程序；为什么？有人看到我做错了什么吗？

感谢您的帮助。

【参考方案1】：

将您的呼叫修改为form.select，如下所示：

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

【讨论】：

感谢 rabusmar，这有帮助，但是当我选择 Option1 时，控制器会获得 value2，反之亦然。我添加了第三个选项，似乎控制器不是我刚刚选择的选项，而是之前的选项！为什么要这样做？我通过将 puts "@test.Menu1 = " + @test.Menu1.to_s + "\n" 添加到控制器来检查这一点。

发送表单的时候还没有设置值。您可以在处理程序中使用setTimeout，以便发送正确的值。

请问，如何在这个文件之外引用 JavaScript，而不是内联 JavaScript？？

【参考方案2】：

如果您检查文档：

API Dock Ruby on Rails select

您将看到选择表单助手采用以下表单：

选择（对象、方法、选择、选项 = 、html_options = ）

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

检查这一点的一种方法是添加类似 :onchange=> "alert('Hello');" 的内容，然后查看事件是否成功触发，或者在您的实际网页中，右键单击选择元素并检查它。如果 html 中没有 onchange 选项，则意味着您的 rails 表单助手确实将 html_options 与其他选项混淆了。所以，你应该拥有什么：

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

确保在 HTML 选项之前包含选项的空哈希，您应该没问题。我认为您甚至不需要拥有 html_options 和 javascript 的东西。

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