鏈接下拉式燒瓶，從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數據庫獲取數據

回答

相關問題