链接下拉式烧瓶，从sqlite数据库获取数据

我想获得一个html选择标签与不同的县（从数据库中获得），当用户选择一个县，我想要另一个选择标签来启用和显示城市在那个县（我有一个sqlite数据库中的数据，其中县的城市数据库中的县的数据）。我在pycharm中使用了python，并且还没有找到任何好的教程。链接下拉式烧瓶，从sqlite数据库获取数据

有没有简单的方法使用一些扩展到烧瓶？我看到了关于sijax的一些东西，但我从来没有理解如何使用它。

我的代码是这样的，但我想这个城市的一部分必须通过一些JavaScript啄创建：

 <div class="form-group"> 
      <label for="inputCounty">County</label> 
      <select class="form-control" id="select_county" name="select_county"> 
       <option value="">Choose county</option> 
       {% for county in counties %} 
        <option value="{{ county.id }}">{{ county.name }}</option> 
       {% endfor %} 
      </select> 
     </div> 
     <div class="form-group"> 
      <label for="inputCity">City</label> 
      <select class="form-control" id="select_city" name="select_city"> 
       <option value="">Choose city</option> 
       {% for city in cities %} 
        <option value="{{ city.id }}" class="{{ city.county }}">{{ city.name }}</option> 
       {% endfor %} 
      </select> 
     </div>

我尝试了“链式” -javascipt插件，但它没有工作，但这就是为什么我在选项标签上课。

现在各县和所有城市都被发送到html模板，但我不认为这将在以后可持续，因为我想在城市中添加另一个下拉菜单，所以我必须发送大量永远不会被使用的数据。

来源

2015-06-06 ruggalainen

您可以尝试实施“占位符” - 首先隐藏的下拉元素。在用户在第一个下拉列表中选择一个县后填充并使其可见。烧瓶只会提供响应。返回html模板，javascript应该完成剩下的工作 – albert

不，没有刷新整个页面的Flask绝对没有办法单独完成这项工作。为了完成你所描述的内容，你必须发送一个AJAX请求回服务器并用JavaScript处理响应。 Jinja2无法帮到你;这正是HTTP工作的方式。我会以更详细的方式回应，但这个问题相当开放，我不知道你的堆栈是什么样的。 –

在你head，添加一个处理改变选择的值：

<script type="text/javascript"> 
    $("#select_county").change(function() { 
     $.ajax({ 
      type: "POST", 
      url: "{{ url_for('select_county') }}", 
      data: { 
       county: $("#select_county").val() 
      }, 
      success: function(data) { 
       $("#select_city").html(data); 
      } 
     }); 
    }); 
</script>

它使用jquery.change县时选择更改为检测和jquery.ajax到选定值发送给后端，这将是这样的：

@app.route('/select_county', methods=['POST']) 
def select_county(): 
    ret = '' 
    for entry in ...your_database_query...: 
     ret += '<option value="{}">{}</option>'.format(entry) 
    return ret

的<option>标签此列表，然后插入第二选择通过jquery.html。

来源

2015-06-08 15:54:46 Celeo

谢谢！它在一些问题后工作:)做了这样的ret：ret + =''％（entry [2]，entry [0]） – ruggalainen

不客气;很高兴这很有帮助。 – Celeo

链接下拉式烧瓶，从sqlite数据库获取数据

回答

相关问题