Django - dropdown form with multiple select
"Dropdown" boxes don't support multiple selection in HTML; browsers will always render it as a flat box as your image shows.
You probably want to use some kind of JS widget - Select2 is a popular one. There are a couple of Django projects - django-select2, django-easy-select - that aim to make it simple to integrate that into your form; I have no experience with either of them.
(And yes, that snippet - like many things on Djangosnippets - is massively out of date; "newforms" was renamed to "forms" even before version 1.0 of Django.)
This is late but hope it helps someone else.
You can also do it a combination of django forms
and a select2 widget Select2MultipleWidget
to make it look cleaner.
class YourCreateForm(forms.ModelForm):
CHOICES = (("address1","address1"), ("address2","address2"))
address=forms.MultipleChoiceField(choices=CHOICES,widget=Select2MultipleWidget)
class Meta:
model = YourModel
fields = ("field1","address",)
Do not forget to install and import the django select2 widgets
You can choose multiple choices by using Django select2. Include below code in your respective HTML file.
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<select class="select_field_class" multiple="multiple" name="option" id="option">
<option value="">Enter the option</option>
{% for option in options %}
<option value="{{ option.id }}">{{ option.name }}</option>
{% endfor %}
</select>
$('.select_field_class').select2( { placeholder: "Select here", maximumSelectionSize: 100 } );