Jquery script is not working on the Django Project

Question

This is the code:

{% extends 'base.html' %}
{% load static %}
{% block title %}
    Details
{% endblock %}
{% block body %}
 <script src="{% static 'js/jquery.min.js' %}"></script>
    <script>
       $(document).ready(function()
        {
            var $select1=$('#inlineFormCustomSelect'),
                $select2=$('#inlineForm'),
                $options=$select2.find('option');
                $select1.on('change',function()
                {
                    $select2.html(options.filter('[value="'+this.value+'"]'));
                });.trigger('change');
        });
    </script>
</form>
<center>
<div class="container">
<div class="card">
<div class="card-title"><h1 style="text-align:center;"><u>Fill in the details to continue:</u></h1></div>
<div class="card-body">
<form method="POST" action="" style="padding:4px; text-align:center;">
    {% csrf_token %}
    <input class="form-control form-control-lg" type="text" name="name" placeholder="Name" required><br><br>
    <input class="form-control form-control-lg" type="date" name="dob" placeholder="Date of Birth" required><br><br>
    <input class="form-control form-control-lg" type="number" name="age" placeholder="Age" required><br><br>
    <label>Gender: </label>
    <input type="radio" id="rd1" name="gender" value="Male">
    <label for="rd1">Male</label>
    <input type="radio" id="rd2" name="gender" value="Female">
    <label for="rd2">Female</label><br><br>
    <input class="form-control form-control-lg" type="number" name="phno" placeholder="Phone Number" required><br><br>
    <input class="form-control form-control-lg" type="email" name="em" placeholder="Email ID" required><br><br>
    <textarea class="form-control form-control-lg" rows="4" cols="50" name="address" placeholder="Address" required></textarea><br><br>
    <div class="form-row align-items-center">
        <div class="col-auto my-1">
            <label class="mr-sm-2" for="inlineFormCustomSelect">Department</label>
            <select class="form-select form-select-sm" id="inlineFormCustomSelect" required>
                <option selected>Choose...</option>
                {% for i in department %}
                <option value="{{i.id}}">{{i.name}}</option>
                {% endfor %}
            </select>
        </div>
    </div><br><br>
     <div class="form-row align-items-center">
        <div class="col-auto my-1">
            <label class="mr-sm-2" for="inlineForm">Course</label>
            <select class="form-select form-select-sm" id="inlineForm" required>
                <option selected>Choose...</option>
                {% for i in course %}
                <option value="{{i.id}}">{{i.c_name}}</option>
                {% endfor %}
            </select>
        </div>
    </div><br><br>
     <div class="form-row align-items-center">
        <div class="col-auto my-1">
            <label class="mr-sm-2" for="select3">Purpose</label>
            <select class="form-select form-select-sm" id="select3" required>
                <option selected>Choose...</option>
                <option value="1">Enquiry</option>
                <option value="2">Place Order</option>
                <option value="3">Return</option>
            </select>
        </div>
    </div><br><br>
    <label>Materials Provide:</label>
        <input type="checkbox" value="1" id="flexCheckDefault">
        <label class="form-check-label" for="flexCheckDefault">Notebooks</label>
        <input type="checkbox" value="2" id="flexCheck">
        <label class="form-check-label" for="flexCheck">Exam Papers</label>
        <input type="checkbox" value="3" id="flexCheckChecked">
        <label class="form-check-label" for="flexCheckChecked">Pen</label><br><br>
    <button type="submit" class="btn btn-outline-success">Submit</button><br>
    {% for msg in messages %}
        {{msg}}<br>
    Click <a href="/">here</a>to return to homepage
    {% endfor %}
</div>
</div>
</div>
</center>
{% endblock %}

The jquery doesn't highlight the keywords with different colour even after importing jquery, its just shows as white plain text. I am using pycharm for developing this webapp what should I do more to make it support the written jquery

I want to make the course dropdown list to be dependent on the department dropdown list i.e, based on the selection of department corresponding courses should appear i.e, a cascading dropdown list

Answer 1

I'm assuming there is a ForeignKey field to department on course. If so, then the loop should be:

<!-- Department -->
<option value="">Select department</option>
{% for i in department %}
    <option value="{{i.id}}">{{i.name}}</option>
{% endfor %}

<!-- Course -->
<option value="">Select course</option>
{% for i in course %}
    <option value="{{i.id}}" data-department-id="{{i.department.id}}">{{i.c_name}}</option>
{% endfor %}

... and the filtering on jQuery can be updated to:

$select1.on('change',function()
{
    // "Reset" the $select2 selection to "Select course".
    $select2.val('');
    
    // "Reset" the options state to be no longer disabled and hidden.
    $select2.find('[disabled][hidden]').attr({
        disabled: false,
        hidden: false
    });
    
    // Set unrelated courses to be disabled and hidden.
    $select2.find(`:not([data-department-id="${this.value}"])`).attr({
        disabled: true,
        hidden: true,
    });
});