Jquery中的下拉列表生成动态字段
基本上我想根据下拉列表中的选择动态生成表单域。 在我看来，我有以下代码。
{:class => 'form-vertical'}) do |f| %> ['Human', 'Event'], :input_html => { :class => 'dropdown'} %> 现在我在assets / javascript / hive.js中有以下代码
$('.dropdown').change(function() { // hide divs first $('form .toggle').hide(); // get value from dropdown var divClass = $('.dropdown').val().toLowerCase(); alert(divClass); // show necessary div $('.' + divClass).show(); });
一切看起来都很好..但不知怎的，它不起作用。任何帮助都是贬值的
我看到你在这里至少有两个潜在的问题。
加载jQuery
首先，您在javascript文件中使用jQuery。 由于您直接加载hive.js ，您需要确保还加载了jQuery库。
防止问题的最佳方法是添加：
<%= javascript_include_tag "hive" %>
在app/views/layouts/application.html.erb的结束标记之上。
然后，在app/assets/javascripts/application.js ，您将包括：
//= require jquery //= require hive
这意味着您可能希望在javascript文件中捕获一个catch，以确保代码在元素可用时运行（详见下文）。
等待绑定事件
其次，即使加载了jQuery，您也不希望在页面上存在内容之前绑定事件处理程序。 在该元素实际存在于页面上之前，这个javascript有可能将更改事件绑定到$('.dropdown') 。
要解决这个问题，我会强制javascript等到页面加载运行。 结合这个想法与确保内容在那里为app/assets/javascripts/hive.js提供了类似的东西：
$(document).ready(function() { if( $('.dropdown').length > 0 ) { $('.dropdown').change(function() { // hide divs first $('form .toggle').hide(); // get value from dropdown var divClass = $('.dropdown').val().toLowerCase(); alert(divClass); // show necessary div $('.' + divClass).show(); }); } });
警告
最后，因为小心自由地使用<%= javascript_include_tag %> 。 无论何时直接使用它，都需要将文件添加到config/production.rb以确保它已编译为生产。 否则，部署并导致错误时将丢失它。
这很快就会变成麻烦。 在rails中， application.js会自动进行预编译。 这就是为什么将application.js用作javascript清单文件更容易，然后使用$('.dropdown').length > 0来知道是否运行javascript代码。 这也可能很快变得混乱，但部署应用程序要容易得多。
更换
<%= simple_form_for(@obj :html => {:class => 'form-vertical'}) do |f| %>
同
<%= simple_form_for(@obj, :html => {:class => 'form-vertical'}) do |f| %>
注意,在@obj之后。 这应该给你第一个错误。
其次，在表单<% end %>之后加载javascript。 这样做的原因是.dropdown元素应该在调用任何操作之前存在。
编辑
检查JSFiddle 。 此外，请确保生成的HTML中包含jQuery库。 在浏览器中呈现视图时，右键单击并执行View Source ，检查是否看到带有src jQuery.js的script标记。