基於使用數據庫的第一個下拉列表選擇更新秒下拉菜單

Question

我在我的HTML中有兩個下拉菜單。第二個選擇會根據第一個的選擇而改變。我希望我的第一個元素是進行AJAX調用並提取數據庫內部的元素。我對jQuery/AJAX不太熟練，我需要幫助。這裏是一個例子：

  <select name="menu"> 
      <option value="meat"> Meat </option> 
      <option value="seafood"> Seafood </option> 
      <option value="vegetarian"> Vegetarian </option> 
      <option value="dessert"> Dessert </option> 
      </select> 



      <select name="entrees"> 
      {% for i in meat %} 
      <option value='{{idx.0}}'> {{i.1}} </option> 
      {% endfor %} 

        //more loops for other menu 
      </select> 

當用戶選擇食物的類型，不同的主菜單出現在第二個html下拉菜單。我在後端使用python和django。主題正在定期更新，這就是爲什麼我無法硬編碼第二個dropdpwn的選項，正如許多人在這裏提出的一些問題。

讓我們說： 我選擇'肉'。我如何做一個Ajax調用來獲得數組中的所有肉類主菜，以便我可以循環使用它？如果您能評論重要的文章，我將不勝感激，以便我可以學習新的內容。

非常感謝您的幫助！

Answer 1

只有Django沒有頁面重新載入，你不能這樣做。對於一些動態更新，你必須使用Javascript。 簡單的方法是使用jQuery一些後端端點（這實際上已經返回一些JSON與主菜）：

<select name="menu" id="menu"> 
    <option value="meat"> Meat </option> 
    <option value="seafood"> Seafood </option> 
    <option value="vegetarian"> Vegetarian </option> 
    <option value="dessert"> Dessert </option> 
</select> 

<select name="entrees" id="entrees"> 
    // display only first category 
    {% for i in meat %} 
    <option value="{{ idx[0] }}">{{ i[1] }}</option> 
    {% endfor %} 
</select> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     const MENU_ITEM = $('#menu'), 
     ENTREES_ITEM = $('#entrees'); 
     MENU_ITEM.on('change', function() { 
     const value = MENU_ITEM.val() 
     $.ajax({ 
      // request settings 
     }).then(function(response) { 
      // remove all options 
      ENTREES_ITEM 
       .find('option') 
       .remove(); 

      // append new options 
      $.each(response.data.entrees, function(i, item) { 
       ENTREES_ITEM.append('<option value="' + i + '">' + item + '</option>'); 
      }) 
     }) 
     }) 
    }); 
</script>