Javascript 基于另一个下拉列表的动态下拉列表_Javascript_Jquery_Html_Ajax_Flask

Javascript 基于另一个下拉列表的动态下拉列表

javascript jquery html ajax flask

Javascript 基于另一个下拉列表的动态下拉列表,javascript,jquery,html,ajax,flask,Javascript,Jquery,Html,Ajax,Flask,我有两个下拉框，如何从第一个get_测试中选择一个值，第二个填充值取决于第一个get_选项Test search.html： results.html：选择第一个后，可以使用jQuery中的$.ajax将值发送到另一个端点，以便它返回一个列表来填充第二个端点。不过，这不会在模板中完成。谢谢，但我仍然不太确定如何完成。我发现很少有django framework Examaple，但我不太确定如何将其转换为Flask framework，我找到了一个非常类似的解决方案。 #!/usr/bin/e

我有两个下拉框，如何从第一个get_测试中选择一个值，第二个填充值取决于第一个get_选项Test

search.html：

results.html：

选择第一个后，可以使用jQuery中的$.ajax将值发送到另一个端点，以便它返回一个列表来填充第二个端点。不过，这不会在模板中完成。谢谢，但我仍然不太确定如何完成。我发现很少有django framework Examaple，但我不太确定如何将其转换为Flask framework，我找到了一个非常类似的解决方案。

#!/usr/bin/env python

import flask

app = flask.Flask(__name__)

def get_tests():
return ["Test1", "Test2"]

def get_options(test):
options = {"Test1": ["Test1_option_a", "Test1_option_b"],
      "Test2": ["Test2_option_a", "Test2_option_b"]}
return options[test]

@app.route('/search', methods=["GET"])
def search():
test = flask.request.args.get('tests')

return flask.render_template('search.html', tests=get_tests())

@app.route('/results', methods=["GET"])
def results():
test = flask.request.args.get('tests')
option = flask.request.args.get('options')
return flask.render_template('results.html', test=test, option=option)

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
  <form enctype="multipart/form-data" action="{{url_for('results')}}" method="get">

      <select name="tests">
      {% for test in tests %}
        <option selected value="{{test}}">{{test}}</option>
      {% endfor %}
      </select>
      <BR/>
      <select name="options">
      <option value=" " selected="selected">Please select one of the options above first</option>
      {% for option in options %}
        <option selected value="{{option}}">{{option}}</option>
      {% endfor %}
      </select>

      <BR/>
      <input type="submit" name="go" value="SEARCH"/>
  </form>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
{{test}}
{{option}}
</body>
</html>