这将是我第一次尝试 javascript。当有人在选择列表中选择特定选项时，我希望表单中的另一个字段变得沉闷，因为它不再适用。我想我必须编写一个 onchange 事件处理程序并让它执行一个 javascript 脚本来检测所选选项并在选择选项时呈现相关字段的表单，或者如果选择了不同的选项则呈现不同的表单......任何人请给我一个开始~谢谢
【问题讨论】：
标签： javascript ruby-on-rails forms
您可以通过使用 jquery 的 change 事件来做到这一点。
例如，您的选项选择如下：
<%= f.select :state, [['NSW'], ['VIC'], ['SA'], ['WA'], ['QLD']] %>
然后，您必须创建 jquery 事件来执行您的下一步操作。例如：
<script>
$(document).ready(function(){
// hidding form
$("#form_1").hide();
$("#form_2").hide();
// showing form after user changes the select option
$("#user_state").change(function(){
var selected = $(this).val();
if(selected == "VIC") {
$("#form_1").show();
} else {
$("#form_2").show();
}
});
});
</script>
我希望这可以帮助您尝试第一次尝试 jquery。祝你好运！
【讨论】：
你可以试试这样的：
$(document).on('blur', "selector", function (e) {
// do what you want to do, change background, color, etc...
});
代替selector 输入您需要更改的元素的类、id 或其他选择器。
您可以将此 sn-p 添加到 app/assets/javascripts/application.js 中包含的任何 javascript 文件中。如果现有的都不适合您，您可以创建一个新的并将其添加到那里...
如果application.js 以//= require_tree . 结尾，则意味着它将需要该目录中的所有文件，您无需手动要求它们。
顺便说一句，关于术语，元素在被点击时具有焦点。当元素失去焦点时（例如单击其他元素或按下选项卡），它会变得模糊。这就是 on('blur') 被调用的时候。
这是您可以为选择写入 on('change') 的方式：
$(document).on('change', 'select', function (e) {
// do something
});
您需要输入正确的选择器而不是“选择”，否则每次选择更改时都会触发它。
我需要仅当 i 中的特定值时才触发该操作 选择列表被选中
没问题，试试这个：
$(document).on('change', 'select', function (e) {
if ($(this).val() == 'specific_value'){
// do something
}
});
更新
我想从我的视图中调用 jquery 并替换元素 在带有 jquery filename.js.erb 文件输出的视图中
jQuery 和所有其他 javascript 都在客户端（Web 浏览器）中执行，您的文件 filename.js.erb 位于服务器上，需要通过 rails 处理。
可以这样做：
有两种方法可以实现这一点。首先，我将解释这两种方法的共同步骤。
您需要向您的routes.rb 添加一条新路由，将其用作您的ajax 调用的端点。 Here 你可以阅读更多关于向 Rails 添加路由的信息，但是为了回答这个问题，我将使用这个简单的路由（名字很笨，你肯定应该改变它）：
resource :my_ajax, only: :create
这就是路线的样子：
rake routes|grep my_ajax
# my_ajax POST /my_ajax(.:format) my_ajaxes#create
它希望你有MyAjaxesController，并在其中有create 动作。您还应该通过将其添加到控制器来使您的控制器能够响应 javascript 请求：
class MyAjaxesController < AdminController
# ...
respond_to :js
# ...
def create
# ...
end
end
您还需要对该操作有一个视图：create.js.erb。您可以将 javascript 添加到该视图中，但您也可以使用 Rails 控制器为您提供的所有内容。因此，您可以使用任何实例变量，也可以渲染部分变量。
这就是局部渲染的方式：
$('#element').html('<%= j(render partial: "_my_partial", locals: { my_var: @my_var }) %>');
当浏览器收到对 ajax 请求的响应时，它只是将 #element 的内容替换为该部分呈现的任何 html。
好的，现在来谈谈方法的不同之处。
您可以向您创建的端点发送一个 ajax 请求（通过 jQuery）（注意方法，我创建的路由需要 POST）。在这种情况下，您需要手动管理收到的任何回复。
但是，有一种方法可以做到这一点。您可以创建一个隐藏所有字段的表单（视图中不需要它，只需要它作为发送请求的一种方式）。需要指定表单的动作、方法，还要设置remote: true，确保异步提交。
这是一个例子：
<%= form_tag(my_ajax_path, remote: true, method: :post) do %>
<%= hidden_field_tag :some_field %>
<% end %>
您需要做的就是随时提交此表单（例如，使用 id 查找并调用 submit:$('#my_form').submit();，剩下的工作将由它完成。您还可以动态更改表单的任何隐藏输入在提交之前。
$(document).on('change', 'select', function (e) {
if ($(this).val() == 'specific_value'){
$('#my_form').submit();
}
});
至于通过rspec测试控制器动作，为了让它工作，不要忘记控制器期望和呈现的是javascript请求，所以你需要指定格式：
it 'my test' do
# expectations
response = post :my_ajax, format: :js
# assertions
end
【讨论】：