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

【问题标题】：How to populate dynamically generated select boxes with ajax如何使用 ajax 填充动态生成的选择框
【发布时间】：2011-01-08 02:54:33
【问题描述】：

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

还和我在一起吗？

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

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

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

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

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

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

谢谢！

【问题讨论】：

标签： ajax select dynamic populate

【解决方案1】：

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

【讨论】：

你的意思是作为一个全球性的？在我的一个 js 函数中，我有“xmlHttp.onreadystatechange=stateChanged;”而且，正如你们所知，“stateChanged”不能接受任何输入。由于它不能接受变量，我必须在处理函数中静态写入字段'txtResult'的名称：document.getElementById("txtResult").innerHTML= xmlHttp.responseText;
找出刚刚添加的列并不难。例如，查找表（静态写入名称），然后（动态）查找最后一列。