如何使用Javascript在Django模板中动态填充选择列表？

我最近一直在学习Django和HTML，但我对JavaScript完全陌生。我正在尝试创建一个数据库显示页面，旁边有一个过滤器菜单。对于此页面，我有以下代码：

Model.py：

class Part(models.Model):
    PartID = models.AutoField(primary_key=True, unique=True)
    SiteID = models.ForeignKey('Site', on_delete=models.CASCADE, null=True)
    Comment = models.CharField(max_length=255, blank=True)
    Subtype = models.ForeignKey('Subtype', on_delete=models.CASCADE, null=True)
    Location = models.CharField(max_length=255, blank=True)
    ConnectedTo= models.ManyToManyField('self', null=True)
    BatchNo = models.CharField(max_length=32, blank=False, null=True)
    SerialNo = models.CharField(max_length=32,blank=True)
    Manufacturer = models.CharField(max_length=32, blank=False, null=True)
    Length = models.FloatField(blank=True, null=True)
    InspectionPeriod = models.IntegerField(blank=True, null=True)
    LastInspected = models.DateField(blank=True, null=True)
    InspectionDue = models.CharField(max_length=255, blank=True)

View.py：

@login_required(login_url='/accounts/login/')
def sites(request, site):

    siteselected = site
    warnings = 0
    expired = 0
    good = 0
    PartsAtSite = Part.objects.filter(SiteID = siteselected)
    TypesList = Type.objects.values_list('TypeName', flat=True).distinct()
    InspectionList = Part.objects.values_list('InspectionPeriod', flat=True).distinct()
    LengthList = Part.objects.values_list('Length', flat=True).distinct()
    LocationList = Part.objects.values_list('Location', flat=True).distinct()
    ManufacturerList = Part.objects.values_list('Manufacturer', flat=True).distinct()

    for part in PartsAtSite:
        if part.LastInspected == None:
            part.InspectionDue = "Yes"
            expired = expired + 1

        else:
            Deadline = part.LastInspected + timedelta(days=part.InspectionPeriod)

        if datetime.now().date() > Deadline:
            part.InspectionDue = "Yes"
            expired = expired + 1

        elif datetime.now().date() > (Deadline - timedelta(days=30)):
            part.InspectionDue = "<30 Days"
            warnings = warnings + 1
        else:
            part.InspectionDue = "No"
            good = good + 1
    part.save()

    context = {
        'TypesList': TypesList,
        'InspectionList': InspectionList,
        'LengthList': LengthList,
        'LocationList': LocationList,
        'ManufacturerList': ManufacturerList,
        'PartsAtSite': PartsAtSite,
        'expired': expired,
        'warnings': warnings,
        'good': good,
        'SiteName': Site.objects.get(SiteID = siteselected).SiteName,
        'SiteNo': Site.objects.get(SiteID = siteselected).SiteID,
    }

template = loader.get_template('myproject/sites.html')
return HttpResponse(template.render(context, request))

@login\u必需（login\u url='/accounts/login/）
def站点（请求，站点）：
siteselected=站点
警告=0
过期=0
好=0
PartsAtSite=Part.objects.filter（SiteID=siteselected）
TypesList=Type.objects.values\u list（'TypeName'，flat=True）.distinct（）
InspectionList=Part.objects.values\u list（'InspectionPeriod'，flat=True）.distinct（）
LengthList=Part.objects.values\u list（'Length'，flat=True）.distinct（）
LocationList=Part.objects.values\u list（'Location'，flat=True）.distinct（）
ManufacturerList=Part.objects.values\u list（'Manufacturer'，flat=True）.distinct（）
对于PartsAtSite中的零件：
如果part.LastInspected==无：
part.InspectionDue=“是”
过期=过期+1
其他：
截止日期=零件上次检查+时间差（天数=零件检查周期）
如果datetime.now（）.date（）>截止日期：
part.InspectionDue=“是”
过期=过期+1
elif datetime.now（）.date（）>（截止日期-时间差（天=30））：
part.InspectionDue=“看起来您正在谈论的是“链接下拉菜单功能”

在Django中，您可以使用
Django-select2
library easy来完成此操作


我相信你可以用谷歌搜索很多解决方案和方法，知道如何用任何编程语言，当然还有Python+Django

我希望我的文章中有几个很好的例子：）







其他图书馆（来自谷歌）







快乐编码！：）
看起来你在谈论“链接下拉功能”

在Django中，您可以使用
Django-select2
library easy来完成此操作


我相信你可以用谷歌搜索很多解决方案和方法，知道如何用任何编程语言，当然还有Python+Django

我希望我的文章中有几个很好的例子：）







其他图书馆（来自谷歌）







快乐编码！：）
使用Javascript，您可以在选择的元素上添加
事件侦听器，这些元素将触发对python后端的请求。但是，您必须编辑视图，使其仅返回数据（通常为JSON格式）为了知道隐藏或不隐藏哪些选项。下面的代码假设视图返回一个简单的列表，您可能需要编辑它

document.getElementById("yourSelect").addEventListener("change", function () {
    // add a handler to the change event
    let req = new XMLHttpRequest(),
        other_select = document.getElementById("anotherSelect");
    req.open("POST", "yourUrl", true);
    // you will need to use json.loads in python code
    req.send(JSON.stringify({value: this.value}));
    req.onreadystatechange = function (res) {
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
            // the request is done and server returned 200 success code
            for (let i in other_select.children){
                let opt = other_select.children[i];
                if(res.indexOf(opt.value) > -1 ){
                    // shows the option if previously hidden
                    opt.style.display = "block";
                }else{
                    // hides the option
                    opt.style.display = "none";
                }
            }
        }
    }
});

使用Javascript，您可以在select元素上添加
事件侦听器
，该元素将触发对python后端的请求。但是，您必须编辑视图，使其仅返回数据（通常为JSON格式）为了知道隐藏或不隐藏哪些选项。下面的代码假设视图返回一个简单的列表，您可能需要编辑它

document.getElementById("yourSelect").addEventListener("change", function () {
    // add a handler to the change event
    let req = new XMLHttpRequest(),
        other_select = document.getElementById("anotherSelect");
    req.open("POST", "yourUrl", true);
    // you will need to use json.loads in python code
    req.send(JSON.stringify({value: this.value}));
    req.onreadystatechange = function (res) {
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
            // the request is done and server returned 200 success code
            for (let i in other_select.children){
                let opt = other_select.children[i];
                if(res.indexOf(opt.value) > -1 ){
                    // shows the option if previously hidden
                    opt.style.display = "block";
                }else{
                    // hides the option
                    opt.style.display = "none";
                }
            }
        }
    }
});

你能展示一下
类型的型号吗？
？1）在你的代码中，在
类型
和
制造商
之间看不到任何联系（我想这与
子类型
有关，但我不认为
子类型
=
类型名
）因此，没有办法根据
制造商
2）过滤
类型
，在@jesusfong的帖子评论中，你写了与你帖子相反的内容——你需要根据
类型
过滤
制造商
。因此，请澄清这些观点并更新你的问题y、 我需要两种方法。假设我有一个包含上述所有列的10个项目的列表。每个列要筛选的
选择
框仅填充该列中使用的值，而不是所有可能的值。我希望该功能在筛选后继续。因此，如果我们筛选类型a，而没有类型a对于制造商C，则制造商C将从
选择中删除。您能否显示
类型
的型号？1）在您的代码中，在
类型
和
制造商
之间看不到任何连接（我想它与
子类型
有关，但我不认为
子类型
=
类型名
）。因此，无法根据
制造商
2）筛选
类型
）在@jesusfong的帖子评论中，你写了与你帖子相反的内容——你需要根据
类型
以另一种方式过滤
制造商
。因此，请澄清这些要点，并相应地更新你的问题。我需要两种方式。假设我有一个包含10个项目的列表，其中包含提到的所有列上面。要为每列筛选的
选择
框仅填充该列中使用的值，而不是所有可能的值。我希望该功能在筛选后继续。因此，如果我们筛选类型a，并且制造商C没有类型a，则制造商C将从
选择
中删除。