0

I am following this answer for the multi-selecting dropdown. I am using django-multiselectfield to collect data in the DB model. I want to show value in bootstrap multi-selecting dropdown but getting the below result enter image description here

I am seeking this result

enter image description here

These are my code snippet

model.py

from django.db import models
from multiselectfield import MultiSelectField

class Country(models.Model):
    name = models.CharField(max_length=40)

    def __str__(self):
        return self.name


class Person(models.Model):
    obj=Country.objects.all()
    TEAM=tuple((ob,ob) for ob in obj) 
    name = models.CharField(max_length=124)
    southasia=MultiSelectField(max_length=200, choices=TEAM)
    
    def __str__(self):
        return self.name

views.py

from django.http import JsonResponse
from django.shortcuts import render, redirect, get_object_or_404

from .forms import PersonCreationForm
from .models import Person


def person_create_view(request):
    form = PersonCreationForm()
    if request.method == 'POST':
        form = PersonCreationForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('person_add')
    return render(request, 'miracle/index.html', {'form': form})

forms.py

from django import forms
from .models import Person


class PersonCreationForm(forms.ModelForm):
    class Meta:
        model = Person
        fields = '__all__'

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

template

{% load crispy_forms_tags %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <title>Dependent Dropdown in Django</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

</head>
<body>
<h2>Person Form</h2>

<form method="post">
     {% csrf_token %}
     {{ form.name|as_crispy_field }}
     <select class="selectpicker" multiple data-live-search="true">
        {{ form.southasia|as_crispy_field }}
    </select>
    <input type="submit" value="Submit">
</form>

<script>
$('select').selectpicker();
</script>

</body>
</html>

How can do show all values in dropdown multiselect instead of normal checkbox select?

mhhabib
  • 2,975
  • 1
  • 15
  • 29

1 Answers1

0

django multiselect will give you check box view. If you want drop-down multiple list one of the work around is you can create another model for the choices and use manytomany relation . Django rendering should automatically detect it as droplist view and gives you opttion to select multiple choices.

Like this.

Class model1(model.models) Choices = models.charfield(choice=choice)

Class person(models.model) Choice = manytomany (model1).

Ben
  • 21
  • 4