根据选择框选择显示/隐藏文本字段答案

【问题标题】：Show/Hide Text Field Based on Select Box Selection根据选择框选择显示/隐藏文本字段
【发布时间】：2012-12-17 23:56:47
【问题描述】：

以简单的形式：

<%= form_for @user do |f| %>
  <%= f.label :source, "How did you find out about us?", :class => "control-label" %>
  <%= f.select(:source, options_for_select([['--  Please select  --',nil],['Source 1','Source 1'], ['Source 2','Source 2'], ['Other','Other']])) %>

  <%= f.label :source_other, "Specify Other Source" %>
  <%= f.text_field :source_other %>
<% end %>

我正在尝试学习如何使用 JQuery 仅在从“源”字段中选择值“其他”时显示“source_other”文本字段。从我在网上看到的，看来我需要使用这样的东西：

$("#source").change(function() {
  if ($("#source").val()=="Other")
    $("#source_other").show();
  else
    $("#source_other").hide();
});

但是，我不太了解如何将 JQuery 与我的表单集成。有人可以指出我正确的方向吗？

更新：

这是生成的 html sn-p:

<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
  <label class="control-label" for="user_lead_source">How did you find out about us?</label>
  <select id="user_source" name="user[source]"><option value="">--  Please select  --</option>
    <option value="Source 1">Source 1</option>
    <option value="Source 2">Source 2</option>
    <option value="Other">Other</option>
  </select>

  <label for="user_source_other">Specify Other Source</label>
  <input id="user_source_other" name="user[source_other]" size="30" type="text" />
</form>

【问题讨论】：

请在浏览器看到的时候显示输出 html。 integrate 是什么意思？
integrate，我的意思是 - 我把 JQuery 代码放在哪里，我还需要做什么才能触发它。

标签： jquery ruby-on-rails ruby-on-rails-3

【解决方案1】：

我怀疑您的服务器代码没有为元素生成 ID，在这种情况下，您的选择器正在寻找 ID 不存在的元素

如果是这种情况，请在您的服务器代码中添加一个 ID，以便您的 jQuery ID 选择器可以工作，或者使用 name= 选择器

$(function(){
    $('input[name="source"]').change(function() {
      $('input[name="source_other"]').toggle(  $(this).val()=="Other" );

    });
});

只要 jQuery 代码包含在 $(document).ready() 或 $(function(){}); 中（它们的简写形式），您就可以将其放置在页面中的脚本标记中的任何位置，只要它是在 jQuery 库加载之后。或者你可以把它放在 jQuery 之后加载的外部文件中

【讨论】：

嗯...看起来 Rails 为输入名称“[User]”添加了前缀。我应该使用通配符还是类似的东西 - 以确保我在 JQuery 代码中引用了正确的输入名称？
OK...看起来 Rails 添加了 ID，所以原始代码应该可以工作
我在我的视图中使用了以下代码，但它仍然无法正常工作。我还缺少什么？：<script type="text/javascript"> $(document).ready(function() { $("#user_source").change(function() { if ($("#user_source").val()=="Other") $("#user_source_other").show(); else $("#user_source_other").hide(); }); }); </script>
你加入了 jQuery 吗？浏览器控制台中是否有任何脚本错误？代码看起来不错。另外，如果您有实时页面，我可以看看
好的。我想我发现了什么。显然，顺序对于 application.js 文件中的 require 语句很重要。我最初有 require jquery 声明。当我切换顺序以首先使用 require jquery_ujs 语句时，代码开始工作。这是现在有效的顺序：//= require jquery_ujs //= require jquery //= require bootstrap //= require_tree .我从stackoverflow.com/questions/10553343/…得到这个提示

【解决方案2】：

替换

 $("#source") with $("#user_source")

【讨论】：

【解决方案3】：

 $(document).on("change", "#user_source", function(){
    var value = $(this).val();
    if (value === "Other"){
      $("#source_other").show();
    }else{
      $("#source_other").hide();
    }
  })

【讨论】：

【解决方案4】：

应该改为$("#user_source")！

Rails 在属性之前添加模型名称。然后它应该隐藏/显示$("#user_source_other") 元素。

此外，您必须将此 jQuery JS 代码包装在 $(document).ready() 或 $(function(){}); 中，正如 charlietfl 之前回答的那样。

【讨论】：