jquery - 如何使用jquery在collection_select中进行onchange

Question

我在我的 html 页面上使用 jquery，并希望在 collection_select 上有一个 onchange 事件。

如果我添加 <%= javascript_include_tag :defaults %>那么我的 jquery 代码不起作用。

基本上我有一个collection_select，如下所示:

<%=collection_select(:product, 'prod_name', @prods, :id, :prod_name, 
{:prompt => 'Select Product'},{:onchange =>  remote_function(:url => 
{:action => 'volume_or_quant'}, :with => "'id=' + this.value")})%>

然后我有一个选择标签和一个文本字段:

<%=select_tag :volume, options_for_select(["", "1/8 lb", "1/4 lb", "Single", 
"Multi 5" ], "N/A") %>
<%= text_field_tag :quantity, "", :size=>"4"%>

当从collection_select中选择一个选项时我想返回到我的操作并检查它在数据库中是否有卷或单位。基于此，将启用上述选择框/文本框。

现在我的 Action 如下:

def volume_or_quant
    @product = Product.find(params[:id])
    puts "Value: " + @product.volume        
end

但是，当我选择某些内容时......什么也没有发生。现在我没有默认的 JavaScript。

我想要做的事情是需要默认原型(prototype)javascript吗？或者可以用jquery完成吗？

Answer 1

是的，remote_function要求包含原型(prototype)库。它可以使用 jQuery 来完成，但不能使用您尝试的 remote_function 帮助器来完成。

让 jQuery 工作:

包含默认值时出现的问题是 Prototype 尝试使用 $，jQuery 也是如此。您可以使用 jQuery 的 noConflict 模式来解决此问题。

像您一开始尝试的那样包括默认值，然后按照以下建议让 jQuery 再次工作:

您可以执行一些操作，但如果您使用 jQuery 的本地副本，请将其添加为最后一行(并在 javascript_include_tag 调用中的默认值之后包含 jQuery):

jQuery.noConflict();

如果您使用的是 Google CDN，请执行以下操作:

<%= javascript_include_tag :defaults, "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" %>
<script type="text/javascript"> jQuery.noConflict() </script>

然后，确保所有 jQuery 代码都包含在以下任一代码中(对于曾经存在于 document.ready 中的任何代码:

// $ = Prototype
jQuery(document).ready(function($){
    // $ = jQuery
});

// or shorthand:
jQuery(function($){
    // $ = jQuery
});

或者只是使用这个(创建一个私有(private)范围，其中 $ = jQuery):

// $ = Prototype
(function($){
    // $ = jQuery
})(jQuery);