使用jquery在RubyonRails中动态选择

在下面的代码中，我尝试在上实现动态选择。我有产品，产品有多个批号。只要我选择了产品，就会显示相关批号。表格详情如下

<div class ="prod"><%= f.association :product, :collection => Product.in_stock %> </div><br/>

<div class ="batch"><%= f.grouped_collection_select :batch_no, Product.in_stock, :store_opening_stocks, :title, :batch_no, :batch_no, :prompt => "Select Batch"%></div>

现在的问题是

options

返回null。这是我在执行

警报（选项）

时发现的，它显示为空。有人能告诉我正确的方向吗？？我还有别的方法可以完成我的任务吗。提前感谢：）

这对你有魔力吗

对控制器进行ajax调用并返回选项集，然后用返回的选项填充批处理，可能会更干净

差不多

var data = {
  product_id: jQuery('.prod :selected').attr("data-id")           
}
jQuery.ajax({
  url: controller/get_batch,
  type: 'GET',
  dataType: 'script',
  data: data
});

使用get_batch.js将

jQuery('.batch').html(<%= escape_javascript(render :partial => "select_box_for_batch") %>);

jQuery（'.batch'）.html（“为批次选择方框”）%>；

代码还不完整，您仍然需要在产品选择中添加一个ID，但我想您会明白的

---

编辑：经过一番努力，我用一个简单的例子做了一个简单的例子。

这对我来说很有用……但是任何比这更好的答案都是欢迎的。因为我对ajax调用以及如何将其连接到控制器和其他东西不太了解。。。我只使用jquery进行了修改

这是代码

        jQuery(document).ready(function(){
      var batchNo = jQuery('.batch').html();
      jQuery('.prod').bind('change',function() {
      var  productSelected = jQuery('.prod :selected').val();
    var options = jQuery(batchNo).find("optgroup[label='" + productSelected + "']").html();
   ;  if (options) {
      jQuery('.batch select').html(options);
      return jQuery('.batch').parent().show();
    } else {
      jQuery('.batch').empty();
    }
    });
 });

---

看起来您在使用包含

div

标记的类选择器时被绊倒了

具体来说，

var child

的目标是返回一个

option

标记数组。理想情况下，应该使用表单生成器为每个元素指定的

ID

属性。不知道您是如何打开表单的（即不知道父模型），让我们假设您的open语句如下所示：

<%= form_for @product_batch do |f| %>

<select name="product_batch[product_id]" id="product_batch_product_id">
<select name="product_batch[batch_no]" id="product_batch_batch_no">

现在，我们可以按如下方式重构jQuery：

jQuery(function() {
  var child = $('#product_batch_batch_no').html();
  $('#product_batch_product_id').live("change", function() {
    var escaped_parent, parent, options;
    parent = $('#product_batch_product_id :selected').text();
    escaped_parent = parent.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
    options = $(child).filter("optgroup[label='" + escaped_parent + "']").html();
    $('#product_batch_batch_no').html(options);
  });
});

代码的最后一位：

if (options) {
  jQuery('.batch').html(options);
  return jQuery('.batch').parent().show();
} else {
  jQuery('.batch').empty();
}

简直是毁灭性的。当产品没有

batch_nojQuery（'.batch'）.empty（）时删除内部的html：

<div class="batch"></div>



一旦删除，这个代码就消失了…这可能不是你想要的

无论如何，我同意Ryan Bates的观点，即这是实现动态选择框的一种非常好、不引人注目的方法。您可能希望在以下位置签出修订的RailsCast：

祝你好运
 我喜欢Vikko使用Ajax调用只加载所需内容的方法，尤其是在数据库增长时

但对于问题中的特定代码，这对我来说是有效的：（在咖啡脚本中）。请注意，关键区别在于分配选项变量的行

jQuery ->
  child = $('.batch').html()
  $('.prod').change ->
    parent = $('.prod :selected').text()
    options = $(child).filter((index) ->
      $(this).attr("label") is parent)

    if options
        $('.batch').html(options)
        $(".batch").parent().show()
    else
    $(".batch").empty()
    return

是的，我明白了…我只是想实施Ryan bates的Railcast。所以Ajax是最好的方法？？？如果您不希望每次更改选择框时都重新加载可见页面，那么Ajax就是最好的方法，通过jquery加载完整列表并过滤选项在客户端有点繁重。。此外，如果op选项数量增加，则需要加载大量数据。通过使用ajax调用，您只加载实际使用的选项数量。例如：100个产品，每个产品有20个选项，这是一个选择框，其中有2000个选项，其中1980个选项被丢弃，而ajax调用在每次更改时只有20个选项。在我看来：只装你用的东西@维科-我真的很抱歉，伙计，我不能按照你的指示去做。你能把剩下的代码贴出来吗。？非常抱歉我这么晚才问你。你想让我发布与此相关的任何其他数据。请让我知道。再次深表歉意，我请求你帮个忙。我对编码一无所知。试着去理解和做事。做不到（：（看起来好像有人想把Railscast的咖啡脚本翻译成jQuery:）@ScottJShea-是的，没错：）我在回答的评论中提到过：）你能在网上的某个地方分享完整的代码吗，这样我就可以查看它了？我最近没有太多时间，但我可能会在这里和那里给你一个指针：）嘿，伙计，这是代码…：）我正在研究..你说的我从理论上理解了…：）但无法做到这一点。因为我不仅是ruby新手。我对编码本身也很陌生…学习frm示例代码中的所有内容…：/参见我第一篇文章中的链接，该示例使用两个选择框，其中第一个选择框的值通过ajax填充第二个选择框的数据。@vikko-million谢谢...）\u/\\ u你为我节省了很多时间，也从这个方法中学到了很多……再次非常感谢……）+答案是50:）我猜不是url：“products\u test/get\u batch”oly“get\u batch应该是代码”，而是完全理解代码和实现再次感谢……：）谢谢…是的，我是在改进的rails演员的帮助下做的…被卡住了。。。在代码中，我认为它的
逃逸了\u父级
rite？？而不是
转义数据
？：）
<div class="batch"></div>

jQuery ->
  child = $('.batch').html()
  $('.prod').change ->
    parent = $('.prod :selected').text()
    options = $(child).filter((index) ->
      $(this).attr("label") is parent)

    if options
        $('.batch').html(options)
        $(".batch").parent().show()
    else
    $(".batch").empty()
    return