Django项目JQuery级联下拉功能失效及代码高亮问题求助

一、jQuery联动下拉失效的修复 #

1. 修正脚本位置与DOM结构问题 #

• 现有代码中脚本写在下拉框元素之前，此时DOM未渲染完成，jQuery无法获取目标元素。需将脚本移至页面底部（{% endblock %}之前），确保元素已加载完毕。
• 移除脚本上方多余的</form>标签，该标签破坏了表单的闭合结构。

2. 修复脚本逻辑错误 #

原脚本存在3处关键错误：

• 变量引用错误：定义了$options，但过滤时误用了options（缺少前缀$）
• 触发事件语法错误：.trigger('change')前多了一个点，且未指定触发对象
• 过滤条件错误：课程下拉框的value是课程ID，而非部门ID，需通过自定义data属性关联部门与课程

修正后的完整模板代码：

{% extends 'base.html' %}
{% load static %}
{% block title %}
    Details
{% endblock %}
{% block body %}
<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 %}
                <!-- 添加data-department属性关联对应部门ID -->
                <option value="{{i.id}}" data-department="{{i.department.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 %}
</form>
</div>
</div>
</div>
</center>

<!-- 移至页面底部的jQuery脚本 -->
<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() {
        var selectedDeptId = $(this).val();
        // 过滤对应部门的课程选项，保留默认的"Choose..."选项
        var filteredOptions = $options.filter(function() {
            return $(this).data('department') == selectedDeptId || $(this).text() === 'Choose...';
        });
        $select2.html(filteredOptions);
    }).trigger('change'); // 触发初始change事件，初始化课程下拉框状态
});
</script>
{% endblock %}

3. 验证jQuery加载状态 #

打开浏览器开发者工具（F12），切换到Console标签，输入$或jQuery，若返回函数则加载正常；若提示$ is not defined，需检查：

• {% static 'js/jquery.min.js' %}路径是否正确，确保static/js/目录下存在该文件
• 可临时替换为CDN链接测试：<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

二、PyCharm中jQuery代码不高亮的解决方法 #

• 配置jQuery库：
  1. 打开File > Settings > Languages & Frameworks > JavaScript > Libraries
  2. 点击Download，搜索jQuery并下载对应版本，添加到项目库中
• 确认文件类型：
  右键模板文件，选择File > File Properties > Mark as HTML，确保PyCharm将其识别为HTML文件
• 启用JavaScript支持：
  在Settings > Languages & Frameworks > JavaScript中，将JavaScript版本设置为jQuery兼容的版本（如ES6）

内容的提问来源于stack exchange，提问作者Fathih Mohammed