如何在 django 表单中提交值后立即加载选项列表

Question

我有一个简单的模板，首先用户从国家列表中选择一个国家，然后从所选国家的区域列表中选择一个区域，最后提交并显示结果。

问题是选择一个国家时，只有在单击提交按钮后才显示该国家的区域，以便用户必须单击提交两次，首先选择一个国家以查看区域列表，第二次选择区域后查看结果。

# models.py

class Region(models.Model):
    country_list = [('IT', 'Italy'),
                    ('FR', 'France')]

    name = models.CharField(max_length=38)
    country = models.CharField(max_length=2, choices=country_list, default="IT")

#views.py

def index_w(request):

    country = request.GET.get('country')
    region = Region.objects.all()
    region = region.filter(country=country)
    regions = request.GET.get('regions')

    results = Result.objects.all()
    if regions is not None:
        results = results.filter(region=regions)
    return render(request, 'index_uni.html', {
                                              'regions': region,
                                              'country': country
                                              })

/*template*/

<form method="get" action="/university/" class="form-area">
<select name="country">
        <option value="IT">Italia</option>
        <option value="FR">France</option>
    </select>
<select name="regions">
    {% for region in regions %}
        <option value="{{region.id}}">{{region.name}}</option>
    {% endfor %}
</select>
<input type="submit">
</form>

当页面第一次加载并且用户为“国家”选择一个值时，“地区”没有选项；单击提交后，它会正确显示法国或意大利的所有地区。 选择国家后，页面如何显示Fr或It的地区？ 感谢大家的帮助，感谢任何建议，我目前正在查看 Django 教程的第 4 部分，但找不到关于此问题的任何信息。

Answer 1

通过 JavaScript 使用 AJAX 来获取区域列表。 AJAX 代表异步 JavaScript 和 XML。它是通过 JavaScript 从 Web 浏览器对 Web 服务器进行异步调用的概念。它允许您要求您的服务器在后台执行更多工作，而无需您的用户手动发出单独的请求，从而导致页面重新加载。 AJAX 的概念是当今 Web 编程的核心。

您将创建一个映射到新视图的 url，该视图将国家/地区作为 request.GET（查询字符串）中的参数。然后，它会向下过滤以获取区域，并以 JSON（JavaScript 对象表示法 - 一种文本格式）响应返回这些区域。

然后为国家下拉菜单创建一个点击事件。当用户选择一个国家时，您将触发 JavaScript 以通过 JavaScript 获取此 url（查看 JQuery AJAX，它比使用 vanilla XHR 请求更简单）。请求返回后，您将使用响应返回的区域列表更新下拉列表。

Answer 2

我建议你应该尝试在前端使用嵌套选择