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的选项进行硬编码的原因，正如许多人在这里提出的一些问题。

LET＆＃39; S SAY：我选择肉类。＆＃39;如何进行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>

根据使用数据库选择的第一个下拉列表更新秒下拉列表

1 个答案: