javascript - 动态填充多个(不止一个)下拉选项/选项(Flask、python、Ajax)

Question

如何根据之前的选择动态更新多个下拉菜单？ (此代码只有三个下拉菜单，但最终我会再添加 2 个)。

问题:第二个下拉列表 (category_2) 正确读取了第一个的值，并且只传递了一个不等于第一个的值的列表(通过 json)。但是，我不知道如何将 category_1 和 category_2 值都传递给第三个下拉列表。

(请注意，如果有帮助，我可以包含模板页面和表单代码。现在，我希望有人可以帮助诊断发送两个变量或 json 字符串的正确方法)。

这是我的代码: App.py 导入 json 从 flask 导入 flask ，请求，render_template，make_response 从表单导入测试表单 导入json

app = Flask(__name__)
app.config['SECRET_KEY'] = "my precious"

extra = ['Product_Type','Geography','Third']

@app.route("/category", methods=["GET", "POST"])
def index():
    """
    Render form and handle form submission
    """
    form = TestForm(request.form)
    form.category_1.choices = [('', 'Select a Category')] + [(x) for x in enumerate(extra,1)]
    chosen_category_1 = None
    chosen_category_2 = None
    chosen_category_3 = None
    return render_template('index.html', form=form)

@app.route("/category/<int:category_1_id>/", methods=["POST"])
def get_request(category_1_id):
    data = [(x) for x in enumerate(extra,1)
        if x[0] != category_1_id]
    response = make_response(json.dumps(data))
    response.content_type = 'application/json'
    return response

if __name__ == "__main__":
    app.run(debug=True)

JS

$(function() {

  // test to ensure jQuery is working
  console.log("whee!")

  // disable refresh button
  $("#refresh-btn").prop("disabled", true)


  $("#category_1_select").change(function() {

    // grab value
    var category_1_id = $("#category_1_select").val();
    var category_2_id = $("#category_2_select").val();


    // send value via GET to URL /<category_id>
    var get_request = $.ajax({
      type: 'POST',
      url: '/category/' + category_1_id + '/',
    });

    // handle response
    get_request.done(function(data){

      // data
      console.log(data)

      // add values to list 
      var option_list = [["", "Select another category"]].concat(data);
      $("#employee_select").empty();
        for (var i = 0; i < option_list.length; i++) {
          $("#employee_select").append(
            $("<option></option>").attr("value", option_list[i][0]).text(option_list[i][1]));
        }
      // show model list
      $("#employee_select").show();
    });
  });

$("#employee_select").change(function() {

    // grab value
    var category_1_id = $("#category_1_select").val();
    var category_2_id = $("#category_2_select").val();

    // send value via GET to URL /<category_id>
    var get_request = $.ajax({
      type: 'POST',
      data: 'JSON.stringify([category_1_id, category_2_id])',
      url: '/category/' + category_1_id + '/',
    });

    // handle response
    get_request.done(function(data){

      // data
      console.log(data)

      // add values to list 
      var option_list = [["", "Select another category"]].concat(data);
      $("#category_3_select").empty();
        for (var i = 0; i < option_list.length; i++) {
          $("#category_3_select").append(
            $("<option></option>").attr("value", option_list[i][0]).text(option_list[i][1]));
        }
      // show model list
      $("#category_3_select").show();
    });
  });

Answer 1

我确信有更好的方法可以做到这一点，但我是这样解决的。

在#employee_select 部分，我传递了 category_2_select 变量并路由到 flask。 (注意 url 的变化):

JS 添加:

$("#employee_select").change(function() {
// grab value
var category_1_id = $("#category_1_select").val();
var category_2_id = $("#category_2_select").val();

// send value via GET to URL /<category_id>
var get_request = $.ajax({
  type: 'POST',
  data: 'JSON.stringify([category_1_id, category_2_id])',
  url: '/category/' + category_1_id + '/'+ category_2_id + '/',
});

然后在我的 app.py 上，我添加了以下内容:

@app.route("/category/<int:category_1_id>/<int:category_2_id>/", methods=["POST"])
def get_request(category_1_id,category_2_id):
    data = [(x) for x in enumerate(extra,1)
        if x[0] != category_1_id and x[0] != category_2_id]
    response = make_response(json.dumps(data))
    response.content_type = 'application/json'
    return response

请注意，category_2_id 必须有一个值。 ( flask 路线不会读取“空”值)。