2

我正在尝试在以下代码中实现动态选择。我有产品，产品有很多批号。一旦我选择与产品相关的批次号，就应该显示出来。表格详情如下。

<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>

表单的jquery如下

jQuery(document).ready(function(){
  var child = jQuery('.batch').html();
  jQuery('.prod').change(function() {
   var parent = jQuery('.prod :selected').text();
   var escaped_parent = parent.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')  
    var options = jQuery(child).filter("optgroup[label='#{escaped_parent}']").html()
     if (options) {
      jQuery('.batch').html(options);
      return jQuery('.batch').parent().show();
    } else {
      jQuery('.batch').empty();
    }
   });
});

现在的问题options是返回null。当我这样做时，我发现alert(options)它显示为空。任何人都可以请我指出正确的方向吗？有没有其他方法可以完成我的任务。提前致谢 ：）

4

4 回答 4

5 
jQuery(document).ready(function(){
  var child = jQuery('.batch').html();
  jQuery('.prod').change(function() {
   var parent = jQuery('.prod :selected').text();
   /* var escaped_parent = parent.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1') */  
    var options = jQuery(child).filter("optgroup[label='" + parent + "']").html()
     if (options) {
      jQuery('.batch').html(options);
      return jQuery('.batch').parent().show();
    } else {
      jQuery('.batch').empty();
    }
   });
});

这对你有什么魔力吗？

对控制器进行 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") %>);

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

编辑：我用一个简单的例子做了一个存储库

于 2012-06-26T09:55:44.673 回答
1

经过一番努力，这对我有用....但欢迎任何其他比这更好的答案。因为我不太了解 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();
    }
    });
 });
于 2012-07-31T11:12:16.317 回答
1

看起来你被包含div标签上的类选择器绊倒了。

具体来说， 的目标var child是返回一个option标签数组。理想情况下，您应该使用ID表单构建器分配给每个元素的属性。不知道您如何打开表单（即不知道父模型），让我们假设您的 open 语句看起来像：

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

这将使您的product和 batch_no选择的字段看起来像：

<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 的观点，即这是实现动态选择框的一种很好的、​​不显眼的方式。您可能想在http://railscasts.com/episodes/88-dynamic-select-menus-revised查看修改后的 RailsCast

祝你好运！

于 2012-08-02T00:44:29.527 回答
0

我喜欢 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
于 2014-03-23T20:17:36.303 回答