根據使用數據庫選擇的第一個下拉列表來更新秒下拉列表

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>