在 Jquery 中隐藏/取消隐藏克隆的表单元素。如何？答案

【问题标题】：Hide / Unhide Cloned form elements in Jquery. How?在 Jquery 中隐藏/取消隐藏克隆的表单元素。如何？
【发布时间】：2010-11-04 22:36:16
【问题描述】：

我可以在 Jquery 中找到许多隐藏和取消隐藏表单元素的示例。我还可以在 Jquery 中找到许多克隆表单元素的示例。但是有没有办法在 Jquery 中隐藏/取消隐藏克隆的表单元素？

例如，假设我有 3 个产品类别（可从下拉框中选择）。这些产品类别中的每一个都有与之关联的自己的表单元素。我想让用户能够多次查询一个或所有的产品类别。

例如，假设用户选择了一个产品类别。与他们选择的产品类别关联的表单元素将取消隐藏。用户可以输入这些表单元素并提交表单......或者他们可以选择从相同或另一个产品类别中再次选择并填写与其第二次选择、第三次选择等相关的表单元素等。

这有意义吗？

帮忙？！

绝对的新手

【问题讨论】：

您能否显示一些标记，让我们知道您正在使用什么？
发布的答案对您有帮助吗？

标签： jquery forms javascript-events

【解决方案1】：

如果您将克隆的表单元素包装在 fieldset 中，并在同一字段集中包含 remove 按钮（或链接或其他），您可以调用：

$('.hideButtonClass').live('click',
function(){
  $(this).parent().hide();
})

JS Fiddle demo

【讨论】：

好的...这是我正在尝试处理的表单。 www.pentco.com/test.php。我试图得到它，以便下拉列表中的第一个选择 - 只出现第一个框。第二个选择-第二个框，第三个选择-第三个框。添加项目时，我只需要显示初始选择框。然后用户可以选择另一个产品类别，并填写与他们的选择相关的表单元素......这样他们可能会选择第二个选择，然后会出现第二个框。
感谢您到目前为止的帮助。所以我使用了你的字段集建议。但是我有两个问题。首先，克隆的产品类别选择下拉菜单在您选择类别时不会更改表单元素。它仅适用于原始产品类别下拉列表。其次，有没有办法让删除按钮只出现在克隆元素上，而不是原来的元素上？第三，克隆元素具有出现在文本输入中的数字。有没有办法让它们空白？请返回 pentco.com/test.php

【解决方案2】：

我不清楚克隆了哪些元素。也许你可以详细说明一下。

但是，如果您可以为任何共享功能的元素分配一个“类”（例如，应该同时隐藏），您可以隐藏所有具有该类的元素。也许选择选项有 class="product_cat_1"，并且有 3 个 div 也有 class="product_cat_1"。然后你可以使用 jquery 隐藏所有 div 的 class="product_cat_1"

编辑：我针对您的情况使用的一个技巧是将每个克隆元素块包装在一个容器 div 中，并具有唯一的 id：

<div id="new_item_1">
    <select class="productcat1" name="productcat1[]">...</select> 
</div>

然后在克隆字段时使用 jQuery，您可以添加相对于该父容器的所有 javascript：

$('#new_item_1 .productcat1').select(...);

【讨论】：

要克隆的元素将是第一个选择下拉框，以及与所有产品类别一起出现的表单元素（即文本输入、下拉列表等）。每个产品类别都有自己的表单元素组合/分布。