如何复制搜索表单元素并添加唯一 ID答案

【问题标题】：How To Duplicate Search Form Elements and Add Unique IDs如何复制搜索表单元素并添加唯一 ID
【发布时间】：2011-05-26 01:24:08
【问题描述】：

我正在构建一个搜索表单(here's the demo)。不幸的是，我已经到了一个地步，老实说，我不知道下一步该怎么做。

我需要添加将导致“添加另一个城市”按钮复制州/省和城市选择的功能，这些选择通过 Ajax 调用填充了 XML 数据，但具有唯一的 ID，因此表单最终可以组合搜索词与多个城市产生搜索结果。此外，它应该能够添加不超过 4 个额外的城市。

谁能至少指出我应该如何开始这个方向？

【问题讨论】：

【解决方案1】：

如果我理解的话，您实际上并不需要为每个创建的元素生成 ID，您可以简单地拥有一个类并使用它来访问它们。

我把这些放在一起来说明这个想法：

一切都完全脱离课堂。

注意：我对链接有点疯狂，因为它又快又脏，你可能想把它分开一点以提高可维护性。

如果出于其他原因您确实需要生成 ID，您可以简单地创建一个计数器变量并将其附加到 ID 的末尾，以便它是唯一的。

编辑：同样的例子，扩展和评论。 http://jsfiddle.net/2SLrF/1/

【讨论】：

这很有趣。您正在那里做一些我不熟悉的事情（例如 .clone()）。但是我无法将其合并到我的代码中。它会克隆具有相同 ID 的第二个 SELECT，因此当您更改第一个州字段时，它会更改两个城市字段上的选项。
您仍在使用 ID。我发布的诀窍是它根本不使用 ID。它使用页面布局和给定类型的所有元素共享的类来访问元素。例如，$(".s1").live("change", function() { $(this).next(".s2").show(); }); 是说，当任何具有 s1 类的元素发生变化时，找到下一个具有 s2 类的元素。所以它总是会在 s1 发生变化之后直接获取 s2。这就是为什么只有一个城市选择受到影响。
@Tom 查看我的答案的更新。我举了这个例子，把它展开，并添加了 cmets 来解释它。希望对您有所帮助。
我已经实现了您的代码并对其稍作更改以使用我的 Ajax 调用，但是如果您在我上面发布的演示 URL 上运行它，您会看到一旦您选择了第一个状态时间，所有后续的城市下拉菜单都会列出该州的城市。换句话说，在第二个、第三个、第四个等下拉列表中选择状态不会激活正确的城市下拉列表。
你没有使用this。看看remysharp.com/2007/04/12/jquerys-this-demystified，它解释了this。您需要使用this 来引用被点击的元素而不是第一个元素。