如何使用ajax填充动态生成的选择框

Question

我无法找到解决该项目中遇到的特定问题的方法。我需要以下内容：动态地将行添加到包含两个选择框的表中，并使用ajax根据第一个选择框的值自动填充第二个选择框的选择选项...在相应的表行中（这是由一些js动态添加的）。

还在我身边吗？

我可以根据第一行中第一个下拉列表的值，使用 ajax/javascript 轻松动态地填充选择下拉列表。我什至可以在同一行中填充三个或更多选择框，使用 ajax/js 函数加载每个附加选择。然而，这不是我的目标。

这就是我所拥有的...我的表单包含一个包含 3 列的简单表格。第一个是复选框，第二个是“州”选择框，第三列是“城市”选择框。表格上方有两个按钮，可让我“添加行”和“删除行”。请注意，第一行（已编程）非常适合使用 ajax 加载州的城市名称。

单击“添加行”按钮后，我可以动态创建第二行，其中包含复选框、州选择和城市选择字段。州选择是根据原始列的innerHTML 内容填充的，但城市选择显然为空，因为它期望ajax 来填充它。注意：这些字段的名称和 ID 名称是迭代的... city_id、city_id_1、city_id_2、city_id_3 等等...所以我可以使用这种唯一性。

我的问题在于，当我从第二行或第三行（依此类推）选择一个州时，只有第一个城市选择发生变化。为什么？因为js/ajax处理函数说只对名称为“city_id”的元素进行操作！这是第一行中城市选择框的名称。

我还没有找到一种方法来动态地将我需要更新的元素的名称传递给 onreadystate ajax 函数。当我需要在一行（同一行）中填充两个或三个选择框时，我必须为每个下拉列表提供互补的 ajax 函数 - 请注意，这些函数是静态的......但是如果我创建动态元素？？我无法将那么多功能预先编程到我的页面中...或者我必须这样做吗？

如果您对如何实现这一目标有任何想法，我将非常感激！

谢谢！

Answer 1

var i=1; // put here the number of the column being added now.
var x=document.getElementById("city_id_"+i);
// populate x