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

时间:2010-01-22 08:06:38

标签: ajax select dynamic populate

我无法为此项目遇到的特定问题找到解决方案。我需要以下内容:动态地向包含两个选择框的表添加行并使用ajax自动填充第二个选择框的选择选项,基于相应表格行中第一个选择框的值... (这是由一些js动态添加的。)

还在我身边吗?

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

这就是我所拥有的...我的表单包含一个包含3列的简单表。第一个是复选框,第二个是“状态”选择框,第三个列是“城市”选择框。我在桌子上面有两个按钮,允许我“添加行”和“删除行”。请注意,第一行(编入程序)非常适合使用ajax加载州的城市名称。

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

我的问题在于,当我从第2行或第3行(等等)中选择状态时,只有第一个城市选择更改。为什么?因为js / ajax处理函数表示只对名为“city_id”的元素进行操作!!这是第一行中城市选择框的名称。

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

如果您对如何实现这一点有任何想法,我会非常感谢!!!

谢谢!

1 个答案:

答案 0 :(得分:0)

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