If in your website you use input fields with select option, then most of the case you may need dynamic select option. In modern website include dynamic select option is very essential. In this article, we will learn how to implement dynamic select option with Django.
What is Dynamic Select Options?
Have you seen that, when you fill up a form in website, and if the form contains select input fields also; then in that case, when you select an option in select input field, then the options of the another input field will be changed?
Let understand it by an example; If you visit any E-learning platform, and you want to the select courses according to your choice, then you can do that with filter. Most of the case in filter section you will find at least two select input fields, one field is to select course category and another field is to select courses. Suppose from course category field if you select Programming Language then you will notice that the options of the course input will be like Introduction to C, Introduction to Java, Introduction to Python, Introduction to Kotlin. And if you select Web development in course category then the options of the course input field will be like Learn Web Development from Scratch, Learn HTML and CSS. That’s the magic of Dynamic Select option.
Let’s Start…..
Step 1:
Create a Django project. It is a basic step so I hope you know how to create a project and an app with django-admin startproject yourprojectname and python manage.py startapp yourappname. So do it quickly.
Step 2:
Create models. For this tutorial, we will create two model — Category and Course.
As you can see that, at first we create Category model (database table)and then created Course model (database table). And then we link Category model with Course model using foreign key. Name of all the courses will be listed under Course model, and name of all Category will be listed under Category model.
Now to migrate the changes in your database you need to run these two following commands:
python manage.py makemigrationspython manage.py migrate
Now go to Django Admin and add data to both category and course.
Step 3:
Register your models. Now you need to register your models to shown it in Django Admin Panel.
Step 4:
Create view functions. Now we need to create two view functions, one view function is to render the index.html (in which html file we will write our html code). Another view function is to get the user input from the first select input field and return the options for the second input fields.
What’s the meaning of this piece of coding?
First view function (indexView()) will get all the categories from database and render it into index.html. In iindex.html we will use this categories (will show you latter)
When user will select an option from the Category input field, then the second view function (getCourses()) will get this input and perform a query filter to get all the courses from database, which courses match the input category. Using values() function, we define value of which input field we need; and using list() function, we convert the query-filter into list, because we cant’t send the QueyString with Jsonresponse. This view function will send the data to client-side in JSON format. In client-side we receive the data with Javascript, and Javascript accept data in JSON format. That’s why to send or return data in JSON format with JsonResponse() method.
Step 5:
Now we need to do URL mapping. URL mapping is needed to assign an URL to each view function. Using this URL we have to send request to the view function.
Go to urls.py (which is located in the project folder, in which folder settings.py is present and write down this code)
Here, in place of app_folder write down the name of your project’s app folder name.
Now go to the urls.py (which is located in the app folder, in which folder apps.py is present).
With the above coding we assign URL to both view function. You can see that in case of views.indexView we assigned empty URL, that means when user only type the domain of the site then this view function will be call. And if user type URL with the path get-course/ then the getCourse function will be call. We will call this function through ajax (will show you latter).
Step 6:
Now move to Front-End. Now we will write HTML code in index.html to create an input form with select field in our webpage.
Never forget to define your template directory in settings.py. I skip this step as it is basic thing to start any Django project.
In the above HTML, we make a simple form with two select input field. You can give the form name, form id, input field id and input field name as your choice.
Remember? in views.py we define indexView function and render categories through context to index.html. Now in this index.html using for loop in template tag we go through each category and read only the name of the category (by i.category)in required places (value and inner html).
Now in your browser if you go to this web page (by typing http://127.0.0.1:8000/ in address bar) we can see that, in the web page first select input field will show all the categories in its option. And second option will not show any option, because still we didn’t add any option in the second input field in index.html. We will do that thing in Javascript. Because the option of the second input field is not static, options need to be updated according to the value of the first input.
Step 7:
Now write Javascript program to update the options of second input. You can write your javascript code externally in a .js file and link it to your index.html, or you can write your javascript code in index.html internally. For the simplicity of this tutorial, we will use internal javascript.
In the bottom of the index.html [but before the closing body tag (</body>)] write down this Javascript code.
Let understand the above code. We use addEventListener to catch any changes in the first select input field (which field is used to select category). And when any changes occurred (means user select any option from option menu) then an Ajax call will be happened. In javascript $.ajax is used for Ajax call. (Ajax is used to send request to server without refresh or reload the page).
type: Define the type of the request’s method; there are many kind of method in request, generally POST and GET is very important. Here we use GET method to send request.
url: Define a URL, in which url we send the request. In step 5, we already create a URL, in ajax we use this url.
data: Define the data that we have to send through the request. Data is to be send by key-value pair (Javascript object type). And name of this key is used to get data in server-side. For example, here at views.py, in getCourses() we use request.GET.get(‘category’) to get the data. We noticed that, paramete of get() function is same as the key name used in data in ajax at fron-end.
dataType: Define the type of data to send. In ajax generally, JSON type data is used to send.
succsess: Defne what need to be do, after successfully send the request and receive the reponse from server.
After successfully receive the response, options of the second select input field (course input field) will be updated.
And Finally, your dynamic select input field is created.
