动态创建的依赖选择（下拉）字段在页面加载时运行.change()

Question

我已经有一段时间没有活跃地编程了，所以如果我描述的问题不太清楚，请多多包涵。

我有一些表单是通过数据库生成的（使用flask）。数据库表会预先填充那些有值的表单，如果没有值，我正在尝试的代码会通过选择一些相关的下拉框来填补这些空白（这些下拉框的值也来自数据库表）。

我大约有11行动态创建的下拉框，分成两列。一列依赖于另一列。我已经成功实现了这一点，使用了以下代码：

左侧的下拉框命名为：“sel_dstColumn_XXX”，其中XXX是数据库中的行ID。右侧的下拉框命名为：“sel_dstTable_XXX”，每行的XXX都是相同的。sel_dstColumn_XXX依赖于sel_dstTable_XXX，并通过下面的.change()函数来工作。

  $("select[id^=sel_dstTable]").change(function () {
    table = this.value;
    my_s = this.id.split('_')[2];
    $.get("/get_columns/" + table, function (data, status) {
      var selID = "select[id=sel_dstColumn_" + my_s + "]";
      $(selID).html("");
      data.forEach(function (table) {
        $(selID).append("<option>" + table + "</option>");
      });
    });
  });

我觉得上面的代码和我不工作的代码有同样的问题，但没关系，因为我只处理一个字段，而不是更复杂的情况。

Python部分很简单，$.get()的URL看起来是这样的：

@app.route('/get_columns/<value>')
def get_columns(value):
    if value in all_tables:
        return jsonify(all_tables[value])
    return ''

我想在页面加载时为所有名为sel_dstTable_XXX的下拉框运行这个，以便根据从数据库中提取的（如果有的话）值来预填充相关的下拉框。我在下面尝试了这个（代码重复，但我不知道如何为所有正确的表单调用.change()，它不工作是因为变量“my_s”没有正确传递给$.get()函数。我不明白为什么my_s在控制台截图中产生了下面的结果。

这是我目前正在处理的内容。大部分是我.change()函数的重复代码。不过，我不确定如何在启动时为每个下拉框调用这个change函数。

  $(function () {
    $("select[name^=sel_dstTable_]").each(function () {
      table = this.value;
      my_s = this.id.split('_')[2];
      console.log("expected variable my_s: " + my_s);
      $.get("/get_columns/" + table, function (data, status) {
        console.log("actual variable my_s:" + my_s);
# PROBLEM ON THE LINE ABOVE reading my_s, i only get the last row ID (22), instead of 12, 13, 14, 15... etc produced when looping through the .each().
        // var selID = "select[name=sel_dstColumn_" + my_s + "]";
        // $(selID).html("");
        // data.forEach(function (table) {
        //   $(selID).append("<option>" + table + "</option>");
        // });
      });
    });
  });

控制台输出

非常感谢任何帮助——我这一周一直在为这个问题苦恼。希望这个描述能让人明白。

动态表单 jquery 前端开发数据库交互 ajax请求 flask框架依赖下拉框表单预填充

动态创建的依赖选择（下拉）字段在页面加载时运行.change()

1 个回答

撰写回答