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  } );