Django/ Javascript : Настройка визуального отображения выпадающего меню в форме.ChoiceFiled

У меня есть приложение с формой, которая разбивается на несколько шагов с помощью FormWizard. Некоторые поля являются многовариантными с тысячами вариантов выбора. Я хочу улучшить представление выпадающего меню. Я хотел бы заменить его на своего рода фиксированный список с полосой прокрутки, чтобы несколько данных отображались всегда, и пользователь видел их, не нажимая на выпадающее меню, чтобы показать его.

Однако я не знаю, как это сделать, с помощью Javascript или CSS. Я создаю форму с помощью django и вызываю ее.

Кто-нибудь может мне помочь или показать пример?

forms.py

class ClientForm1(forms.Form):
    client = forms.ChoiceField(label="Client :")
    
    def __init__(self, uuid_contrat, *args, **kwargs) :
        
        super(ClientForm1, self).__init__(*args, **kwargs)
        id_contrat = Entity.objects.all().filter(uuid=uuid_contrat).values_list('id', flat=True)[0]
        client_choices = Toriiclients.objects.filter(idcustomer=id_contrat).order_by('-id').values_list('id', 'prenom')
        self.fields['client'].choices = client_choices

class SaletypeForm2(forms.Form):
    saletype = forms.ChoiceField(label="Client :")
    information =forms.CharField(max_length=1000)
    
    def __init__(self, uuid_contrat, *args, **kwargs) :
        
        super(SaletypeForm2, self).__init__(*args, **kwargs)
        id_contrat = Entity.objects.all().filter(uuid=uuid_contrat).values_list('id', flat=True)[0]
        client_choices = ToriiLstAffairetype.objects.filter(idcustomer=id_contrat).order_by('-id').values_list('short_desc', 'short_desc')
        self.fields['saletype'].choices = client_choices

views.py

from django.shortcuts import render
from .forms import ClientForm1, SaletypeForm2
from formtools.wizard.views import SessionWizardView

class FormWizardView(SessionWizardView):
    template_name = "sales/formwiz.html"
    form_list = [ClientForm1, SaletypeForm2]

    def get_context_data(self, form, **kwargs):

        context = super(FormWizardView, self).get_context_data(form, **kwargs)

        uuid_contrat = self.kwargs['uuid_contrat']
        id_contrat = Entity.objects.all().filter(uuid=uuid_contrat).values_list('id', flat=True)[0]
        context['last_clients_created'] = Toriiclients.objects.filter(idcustomer=id_contrat).order_by('-id')[:10]

        return context

    def done(self, form_list, **kwargs):
        return render(self.request, 'done.html', {
            'form_data': [form.cleaned_data for form in form_list],
        })

    def get_form_kwargs(self, step,) :
    
        uuid_contrat = self.kwargs['uuid_contrat']
        kwargs = super(FormWizardView, self).get_form_kwargs(step)
        kwargs["uuid_contrat"] = uuid_contrat

        return kwargs

html

{% extends "layout.html" %}

{% load crispy_forms_tags %}

{% load i18n %}

{% block head %}
{{ wizard.form.media }}
{% endblock %}

{% block content %}

<p>Step {{ wizard.steps.step1 }} of {{ wizard.steps.count }}</p>

{% if wizard.steps.step1 == 1 %}

{% endif %}

<form action="" method="post">{% csrf_token %}
    <table>
    {{ wizard.management_form }}
    {% if wizard.form.forms %}
        {{ wizard.form.management_form }}
        {% for form in wizard.form.forms %}
            {{ form }}
        {% endfor %}
    {% else %}
        {{ wizard.form }}
    {% endif %}
    </table>
    {% if wizard.steps.prev %}
    <button name="wizard_goto_step" type="submit" value="{{ wizard.steps.first }}">{% trans "first step" %}</button>
    <button name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}">{% trans "prev step" %}</button>
    {% endif %}
    <input type="submit" value="{% trans "submit" %}"/>
</form>

Вернуться на верх