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

这将是我第一次尝试javascript。当有人在选择列表中选择某个特定选项时，我希望表单中的另一个字段变得单调，因为它不再适用。我想我必须编写一个onchange事件处理程序，让它执行一个javascript脚本，该脚本检测所选选项，并在选项被选中时呈现带有相关字段的表单，或者在选择不同选项时呈现不同的表单。。。任何人都可以给我一个开始，请~谢谢

你可以试试这样的东西：

$(document).on('blur', "selector", function (e) { 
  // do what you want to do, change background, color, etc...
});

<%= f.select :state, [['NSW'], ['VIC'], ['SA'], ['WA'], ['QLD']] %>

而不是需要更改的元素的类、id或其他选择器中的选择器类型

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

如果application.js以/=require_树结尾。这意味着它将需要该目录中的所有文件，而您不需要手动要求它们

顺便说一句，关于术语，元素在单击时具有焦点。当元素失去焦点时（例如，单击其他元素或按下tab键），它会变得模糊。这是当“模糊”被调用的时候

以下是您如何为选择项写入“更改”：

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

您需要输入正确的选择器，而不是“选择”，否则每次选择更改时都会触发该选择器

我需要仅当我在 选择列表被选中

没问题，试试这个：

$(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处理

这是如何做到的：

ajax请求被发送到服务器 它被rails接收，并被路由到控制器 它由控制器操作处理 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，并在其中创建操作。还应通过将以下内容添加到控制器中，使控制器能够响应javascript请求：

class MyAjaxesController < AdminController
  # ...
  respond_to :js
  # ...

  def create
    # ...
  end
end

当浏览器接收到对ajax请求的响应时，它只是用该部分所呈现的html替换元素的内容

好的，现在来谈谈不同的方法

您可以通过jQuery发送一个ajax请求，目标是使用该方法创建的端点，即我创建的路由。在这种情况下，您需要手动管理收到的任何响应

然而，有一种rails方法可以做到这一点。您可以创建一个表单，隐藏其所有字段—您在视图中不需要它，您只需要它作为发送请求的手段。您需要为表单、方法指定操作，还需要设置remote:true，以确保它是异步提交的

下面是一个例子：

<%= form_tag(my_ajax_path, remote: true, method: :post) do %>
  <%= hidden_field_tag :some_field %>
<% end %>

对于rspec测试控制器操作，为了使其工作，不要忘记控制器期望和呈现的是javascript请求，因此需要指定格式：

it 'my test' do
  # expectations
  response = post :my_ajax, format: :js
  # assertions
end

您可以使用jquery的change事件来实现这一点。 例如，您的选项选择如下：

$(document).on('blur', "selector", function (e) { 
  // do what you want to do, change background, color, etc...
});

<%= 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的第一次体验。祝你好运

谢谢。。。我只需要在选择列表中的特定值被选中时触发该操作hanks，而不是加载一个全新的表单页面，我只想使用字段的标签explainion将包含解释字段的部分呈现到表单中，因此我尝试了此操作，但它不起作用$explainion.on'change'、'reason'，函数e{如果$this.val=='我无法解释'{render'只读\解释\字段'}}；在我看来，您不能通过javascript呈现rails部分。使用jquery，您可以冷调用$'element'.html'…'并替换其内容，但您不能调用render。为此，您需要向rails发送远程请求，并在javascript视图中执行。您希望我用一个示例更新答案吗？