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列表中的元素。

我提到了this关于SO的问题，以使用AJAX检索从第一个下拉列表中选择的选项，但这无济于事所以请有人可以帮我解决这个问题

答案1之后的结果

Answer 1

您必须在flask 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>

如何在Flask中创建动态下拉菜单？

1 个答案: