如何在 Flask 中创建动态下拉列表？

Question

我在 SO 上提到的所有问题都显示了创建动态下拉列表的结果，他们在其中使用了数据库，我没有使用数据库，而是使用 CSV 文件来获取数据，所以那些答案对我没有帮助

这是我的 app.py 文件

@app.route('/StatsPage', methods=['GET','POST'])
def StatsPage():
    timeline=['Daily', 'Weekly', 'Monthly']
    return render_template('StatsPage.html', timeline=timeline)

@app.route('/StatsPage/timing', methods=['GET','POST'])
def get_timeline(timing):
    dates_dict=['2020-08-23', '2020-08-24', '2020-08-25', '2020-08-26', '2020-08-27', '2020-08-28', '2020-08-29', '2020-08-30', '2020-08-31', '2020-09-01', '2020-09-02', '2020-09-03', '2020-09-04', '2020-09-05', '2020-09-06', '2020-09-07', '2020-09-08', '2020-09-09']
    months=['August', 'September']
    week=['2020-08-23', '2020-08-30', '2020-09-06', '2020-09-13', '2020-09-20']
   
    timelines={
    'Daily': dates_dict,
    'Weekly': week,
    'Monthly': months
    }

    return jsonify(timelines[timing])

这是我的StatsPage.html 文件

{% extends "base.html" %}
{% block content %}


  <article class="media content-section">
    <div class="media-body">
      <div class="article-metadata">
      </div>
      <div class="row">
        <form method="POST" action="/StatsPage"> 
          <select class="btn btn-secondary dropdown-toggle" style="background-color: #FFFFFF; color:  #105583;" name="selectedTimeline">
            <option style="color:  #105583;" disabled selected value= "">Select the option</option>
              {% for t in timeline  %}
                <option style="color:  #105583;" value= "{{t}}" SELECTED>{{t}}</option>"
              {% endfor %}
          </select>
          <select class="btn btn-secondary dropdown-toggle" style="background-color: #FFFFFF; color:  #105583;" name="selectedDate">
              {% for d in dates_dict %}
                <option style="color:  #105583;" value= "{{d}}" SELECTED>{{d}}</option>"
              {% endfor %}
          </select>
          <button type="submit" name="" class="btn btn-outline-primary">Generate Results</button>
        </form>  
      </div>
      <script src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous">
      </script>
      <script>
            $('select[name=selectedTimeline]').change(function() {
              timing = this.value
              $.get('/DailyStats/'+timing, function(data, status){
                $('select[name=selectedDate]').html('')
                data.forEach(function(date){
                  $('select[name=selectedDate]').append('<option>'+date+'</option>')
                })
              })
            })
      </script>
    </div>
  </article>
  

{% endblock content %}

我想做的只是 当用户选择每日选项时，应显示days_dict 列表中的元素，当用户选择每周选项时，应显示week 列表中的元素，当用户选择每月选项时，应显示列表中的元素应该显示months 列表。

我提到了关于 SO 的this 问题，用于检索使用 AJAX 从第一个下拉列表中选择的选项，但这对我没有帮助 所以请有人可以帮我完成这项工作

answer1 后的结果

Answer 1

您必须更改烧瓶 URL 中的语法。你也可以使用 AJAX

@app.route('/StatsPage/<timing>', methods=['GET','POST'])
def get_timeline(timing):

包括 Jquery CDN。

<article class="media content-section">
  <div class="media-body">
    <div class="article-metadata">
    </div>
    <div class="row">
    <form method="POST" action="/StatsPage"> 
        <select class="btn btn-secondary dropdown-toggle" style="background-color: #FFFFFF; color:  #105583;" name="selectedTimeline">
              <option style="color:  #105583;" disabled selected value= "">Select the option</option>
            {% for t in timeline  %}
              <option style="color:  #105583;" value= "{{t}}">{{t}}</option>
            {% endfor %}
        </select>
        <select class="btn btn-secondary dropdown-toggle" style="background-color: #FFFFFF; color:  #105583;" name="selectedDate">
            {% for d in dates_dict %}
              <option style="color:  #105583;" value= "{{d}}">{{d}}</option>
            {% endfor %}
        </select>
        <button type="submit" name="" class="btn btn-outline-primary">Generate Results</button>
      </form>  
    </div>
  </div>
</article>

<script>
  $('select[name=selectedTimeline]').change(function() {
    timing = this.value
    $.get('/DailyStats/'+timing, function(data, status){
      $('select[name=selectedDate]').html('')
      data.forEach(function(date){
        $('select[name=selectedDate]').append('<option>'+date+'</option>')
      })
    })
  })
</script>