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

我正在建立一个搜索表单。不幸的是，我真的不知道下一步该怎么做

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

---

至少有人能告诉我应该如何从这个开始吗？

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

我把这些放在一起是为了说明这个想法：

一切都是在课外进行的

注意：我对链子有点疯狂，因为它又快又脏，为了便于维护，你可能想把它分开一点

如果出于其他原因确实需要生成ID，只需创建一个计数器变量，并将其附加到ID的末尾，使其唯一

---

编辑：同一示例，展开并注释

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

我把这些放在一起是为了说明这个想法：

一切都是在课外进行的

注意：我对链子有点疯狂，因为它又快又脏，为了便于维护，你可能想把它分开一点

如果出于其他原因确实需要生成ID，只需创建一个计数器变量，并将其附加到ID的末尾，使其唯一

---

编辑：同一示例，展开并注释

那很有趣。您正在做一些我不熟悉的事情（例如（.clone（））。但我很难将其合并到我的代码中。它克隆了具有相同ID的第二个SELECT，因此当您更改第一个state字段时，它会更改两个城市字段上的选项。您仍然使用ID。我发布的技巧是它根本不使用ID。它使用页面布局和一个由给定类型的所有元素共享的类来访问元素。例如，

$（.s1”）.live（“change”，function（）{$（this.next（.s2”）.show（）；}）

的意思是，当类为

s1

的任何元素发生更改时，查找类为

s2

的下一个元素。因此，它总是在已更改的

s1

之后直接抓取

s2

。这就是为什么只有一个城市选择受到影响。@Tom看到了我答案的更新。我举了一个例子，对它进行了扩展，并添加了注释来解释它。希望这能有所帮助。我已经实现了您的代码，并对其进行了轻微更改，以使用我的Ajax调用，但是如果您在我上面发布的演示URL上运行它，您将看到，一旦您第一次选择了一个州，所有后续的城市下拉列表都将列出该州的城市。换句话说，在第二、第三、第四等下拉列表中选择状态不会激活正确的城市下拉列表。您没有使用

此

。看看是什么解释了这个。您需要使用

this

来引用单击的元素，而不是第一个元素。这很有趣。您正在做一些我不熟悉的事情（例如（.clone（））。但我很难将其合并到我的代码中。它克隆了具有相同ID的第二个SELECT，因此当您更改第一个state字段时，它会更改两个城市字段上的选项。您仍然使用ID。我发布的技巧是它根本不使用ID。它使用页面布局和一个由给定类型的所有元素共享的类来访问元素。例如，

$（.s1”）.live（“change”，function（）{$（this.next（.s2”）.show（）；}）

的意思是，当类为

s1

的任何元素发生更改时，查找类为

s2

的下一个元素。因此，它总是在已更改的

s1

之后直接抓取

s2

。这就是为什么只有一个城市选择受到影响。@Tom看到了我答案的更新。我举了一个例子，对它进行了扩展，并添加了注释来解释它。希望这能有所帮助。我已经实现了您的代码，并对其进行了轻微更改，以使用我的Ajax调用，但是如果您在我上面发布的演示URL上运行它，您将看到，一旦您第一次选择了一个州，所有后续的城市下拉列表都将列出该州的城市。换句话说，在第二、第三、第四等下拉列表中选择状态不会激活正确的城市下拉列表。您没有使用

此

。看看是什么解释了这个。您需要使用

this

来引用单击的元素，而不是第一个元素。