I want to create a ListView that displays items from the Inventory model based on the selected Site from the dropdown menu without reloading the page as shown here:

I tried passing in site.pk into the ListView filter which comes from the HTML template, but I believe this would reload the page and would pass it into the url (we prefer it not to).

inventory.html

{% for site in data.project_sites %}
      <a href="{% url 'inventory:list-inventory' site.pk %}">
        <option value="{{site.pk}}">{{ site.siteName }}</option>
      </a>
      {% endfor %}

views.py

class InventoryListView(LoginRequiredMixin, generic.ListView):
    ...
    model = Inventory
    def get_queryset(self):
        qs = { 
            "inventory": Inventory.objects.filter(id=self.request.GET.get('site.pk')),
            "project_sites": Site.objects.all(),
            }
        return qs

I understand that this requires Javascript, but my group does not have much experience with Javascript and we have a short timeline for this.