How to Create Cascading/Dependent Dropdown List in Django python

In this tutorial we will learn how to create cascading dropdown list in django python. In this small application we are going to  improve user experience  by  Creating dynamic dropdown  list using jquery.

Dropdown.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DropDown</title>
   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

  <div class="container">
  <div class="card body">
    <br/>
    <br/>
    <br/>
   
    <div class="row">
    <div class="col-md-4">
        
        <select name="dept" id="department" class="form-control">       
            <option value="0">--Select--</option>     
            {% for item in department  %}
            <option value="{{ item.id }}">{{ item.departmentname }}</option>
            {% endfor %}
        </select>
    </div>
  
    <br/>
    <div class="col-md-4">
        <select name="emp" id="Employee" class="form-control">
            <option value="0">--Select--</option>  
            {% for item in employee  %}
            <option value="{{ item.deptid_id }}">{{ item.empname }}</option>
            {% endfor %}
        </select>
    </div>
   </div>
  </div>
</div>

<script src="/Dropdownjs"></script>
</body>
</html>

Dropdown.js

$(document).ready(function(){

 var department = $("#department");
 var Employee = $("#Employee");
 var $options = Employee.find('option');
 department.on('change',function(){
    Employee.html($options.filter('[value="'+ this.value  +'"]'));
 }).trigger('change'); 

}); 


urls.py

from django.urls.conf import path
from dropdown import  views 

urlpatterns = [
    
    path('getdata/',views.getdata,name="getdata"), 
]


models.py

from django.db import models
from django.db.models.base import Model
from django.db.models.deletion import CASCADE

# Create your models here.

class department(models.Model):
    departmentname = models.CharField(max_length=100)

class employee(models.Model):
    deptid = models.ForeignKey(department,on_delete=CASCADE)
    empname = models.CharField(max_length=100)
    age = models.IntegerField()
    address = models.CharField(max_length=500, null=True)
    contactno = models.CharField(max_length=20)

views.py

from django.shortcuts import render
from .models import department,employee

# Create your views here.

def getdata(request):
    template_name = 'dropdown.html'
    deptcontext = department.objects.all()
    empcontext = employee.objects.all()

    return render(request,template_name,{'department':deptcontext,'employee':empcontext})



Please leave your  comments and suggestion

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments