Jquery 输入字段中的Ajax提交

我知道这可能是一个常见的问题，但我已经找了几个小时没有运气，所以我想我会问

如何在输入字段更改时通过ajax提交表单？我有一个表单，其中，用户从下拉列表中选择一个产品，然后我希望该产品的图片立即通过ajax显示出来。这就是我所拥有的：

<%= f.association :product, collection: @products %>
<div id="prodPicture">...</div>

...

我认为正确的方法可能是添加remote:true和url，但到目前为止我还没有让它工作

<%= f.association :product, collection: @products, remote: true, url: url_for(controller: 'quotes', action: 'getdata'), type: 'JSON' %>

这是将ajax事件添加到表单字段更改的正确方法吗

---

提前感谢您的帮助

您绑定到下拉列表更改事件

$("#idofdropdown").change(function(){
var selection = $(this).val() // always gets selected value by default
$.ajax()//and so forth

});

---

您可以在页面上创建隐藏的

img

元素，然后添加一些JS代码：

（“#idofdropdown”）.change（function（）{$（'#id_image'）.attr（'src'，PRODUCTS_image[parseInt（$（this.val（））]））]；

然后显示img

在哪里

var PRODUCTS_IMAGES=#{@PRODUCTS.collect{{e}[e.id，e.file.url]}.to_json}；

---

类似的东西……基本上，你有一个JS字典，在下拉列表和img src中选择ID。

当你更改收藏并立即显示图片时，你想这样做吗

您可以通过两种方式执行此操作：

1.将

数据图像url

添加到选项

最好的方法是将图像url添加到选项中使用

数据图像url

：

<%= f.association :product, include_blank: false, label: 'Product', input_html: {class: 'product_select' do %>
  <%= f.select :product, @products.map{|a| [a.name, a.id, {"data-image-url" => a.image_url}]} %>
<% end %>

我认为您最好使用

将数据图像url添加到选项

我想写一些关于
remote:true
：

remote:true
来自
jquery\u ujs
，它可以在
链接到
、
按钮到
或
提交
中使用。它必须有一个链接。当您更改选择或单选等时，不能使用
remote:true

您可以在指南中了解有关
remote:true
的更多信息：
我认为您根本不需要表单提交，不管是否需要ajax。您应该能够在下拉值更改时使用javascript更改图像的url。
<script type="text/javascript">
  $(".product_select").change(function(){
    var selection = $(this).find(':selected').data("imageUrl");   //The product image url
    $('#prodPicture').html("<img src='" + selection + "' />")
  });
</script>

<script type="text/javascript">
  $(".product_select").change(function(){
    var selection = $(this).val();
    $.post("/products/return_image_url",
            {product_id: selection},
            function(data) {
               if (data != null) {
                  $('#prodPicture').html("<img src='" + data + "' />")
               }
             }
           )
  });
</script>

def return_image_url
  product = Product.find(params[:product_id])
  ...
  respond_to do |format|
    format.json { render :json => product.image_url }
  end
end