Javascript 使用Django表单以更用户友好的方式呈现单选按钮的大型查询

我试图显示用户在应用程序时可以选择的时间段。有时会有相当多的插槽

问题是我目前正在使用单选按钮和ModelChoiceField

我在下面附上了一张我目前拥有的图片

我不确定是否需要使用React或其他前端框架。我想要的是以一种方式显示单选按钮，这种方式不仅仅是一个巨大的列表，而是将一个较短的列表分组显示

我曾经考虑过使用CSS来隐藏一些时间。也许每小时都有一个复选框，可以在该小时内显示和隐藏单选按钮（大多数插槽为5分钟），但我在尝试使用ModelChoiceField过滤和呈现表单时遇到了困难

我的ModelForm类的价值：

class ApplicationForm(forms.ModelForm):
    slot_choice = forms.ModelChoiceField(queryset=None,
        label="Please select a time slot. (You can change this at a later time if your schedule changes)",
        empty_label="Please select a time slot",
        widget=forms.RadioSelect(attrs={'class': 'custom-control-input'}))

    class Meta:
        model = Application
        fields = ['resume', 'cover_letter']

    def __init__(self, show, *args, **kwargs):
        super(ApplicationForm, self).__init__(*args, **kwargs)
        # only display slots for current show that are not filled.
        self.fields['slot_choice'].queryset = Slot.objects.filter(show=show).filter(application__isnull=True).order_by('start')

我的视图实际上只是将Show对象作为参数传递给表单。类似于

ApplicationForm（Show.objects.get（pk=Show\u id））

---

如果有帮助的话，提供一些关于模型的背景知识。有一个模特儿。然后是两种型号：插槽和应用程序，它们都有一个show fk。插槽还具有应用程序外键。表单的目标是创建一个应用程序对象，并将应用程序添加到可用的插槽对象中。

您可以使用CSS和JS，也可以使用React。无论哪种方式，你都会得到你想要的结果。您可以尝试，但我认为，大多数情况下，您是新的建设前端。花点时间使用JS/HTML和引导。然后，学习React中的一些基础知识，您在这里讨论的大多数问题都会自行解决。对于Javascript，您需要从哪里开始，请点击此处，然后点击此处的官方React文档，谢谢您的回答！我不认为我在寻找一个无限滚动的解决方案，但我可能会在其他地方使用它。你基本上是对的，我使用HTML、CSS、JS和Bootstrap的时间比Django长，但我并没有真正用JavaScript构建整个页面，而是在页面上实现特定的功能。不过，我会更详细地了解React。没问题。前端和后端有细微的区别，现在你们有了正确的前进方向。