使用jquery在rails上的ruby中动态选择
嘿伙计我有一个问题我试图在以下代码中实现动态选择。 我有产品和产品有很多批次。 只要我选择产品关联批次，就应该显示。 表格详情如下。
Product.in_stock %>
"Select Batch"%> 和表格的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)它显示为空。 任何人都可以请我正确的方向？ 有没有其他方法可以完成我的任务。 提前致谢 ：）
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，但我认为您会明白这一点。
编辑：我用一个简单的例子建立了一个存储库
经过一番努力，这对我有用……但是比这更好的任何其他答案都是受欢迎的。 因为我不太关注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属性。 不知道你是如何打开表单的（即不知道父模型），让我们假设你的开放语句看起来像：
<%= form_for @product_batch do |f| %>
这将使您的product和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：
一旦删除，这段代码就不见了……这可能不是你想要的。
无论如何，我同意Ryan Bates的观点，即这是一种实现动态选择框的伟大，不引人注目的方式。 您可以在http://railscasts.com/episodes/88-dynamic-select-menus-revised上查看修订后的RailsCast
祝你好运！
我喜欢Vikko使用Ajax调用的方法只加载所需的东西，特别是随着数据库的增长。
但对于问题中的特定代码，这对我有用:(在咖啡脚本中）。 请注意，关键区别在于分配options变量的行
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