Rails 表单:当在另一个字段中选择特定选项时，如何模糊字段

你可以通过使用 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 或其他选择器。

您可以将此代码段添加到 app/assets/javascripts/application.js 中包含的任何 JavaScript 文件中。您可以创建一个新的，如果没有适合您的现有内容，则可以将其添加到那里......

如果application.js以 //= require_tree . 结尾，则表示它将需要该目录中的所有文件，您无需手动要求它们。

顺便说一句，关于术语，元素在单击时具有焦点。当元素失去焦点时(例如，单击其他元素或按下制表符(，它变得模糊。那是on('blur'(被调用的时候。

这是您可以写("更改"(进行选择的方法：

$(document).on('change', 'select', function (e) {
  // do something
});

您需要输入正确的选择器而不是"选择"，否则每次任何选择更改时都会触发它。

我需要仅在 选择列表已选中

没问题，试试这个：

$(document).on('change', 'select', function (e) {
  if ($(this).val() == 'specific_value'){
    // do something
  }
});

更新

我想从我的视图中调用 jquery 并替换元素 在具有 jQuery 文件名.js.erb 文件输出的视图中

jQuery和所有其他javascript都在客户端(Web浏览器(中执行，你的文件filename.js.erb位于服务器上，需要由rails处理。

这是可以做到的：

1. AJAX 请求发送到服务器
2. 它被轨道拾取，并路由到控制器
3. 它由控制器操作处理
4. 呈现 JavaScript 视图并将其作为响应发布

有两种方法可以实现此目的。首先，我将解释这两种方法的共同步骤。

您需要向routes.rb添加新路由，该路由将用作 ajax 调用的终端节点。在这里，您可以阅读有关将路由添加到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 controller为您提供的所有内容。因此，您可以使用任何实例变量，也可以呈现部分。

以下是部分的呈现方式：

$('#element').html('<%= j(render partial: "_my_partial", locals: { my_var: @my_var }) %>');

当浏览器收到对 ajax 请求的响应时，它只是用该部分呈现的任何 html 替换#element的内容。

好的，现在来谈谈方法的差异。

您可以向创建的端点发送一个 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