单击运行查询功能脚本Django

Question

在我的 Django 项目中，在我的 HTML 页面上，我有一个脚本，它根据其他值（$("#id_report").val() 值）运行 Query。功能“点击”运行。问题是，当我单击“#id_person”下拉菜单以选择从查询中获得的选项时，我再次运行查询并重置我的选择。

问题是：

1. 我点击下拉菜单
2. 查询运行
3. 我从查询返回数据中选择了一个选项
4. 当我选择时，我需要单击一个选择，查询再次运行并且我的选择丢失我需要脚本只运行一次并且下拉菜单是两次单击。首先选择下拉菜单，然后选择一个选项。

post_form.html

{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
    <div class="content-section">

        <form method="POST" id="PostForm" data-sektor-url="{% url 'ajax_load_sektors' %}" data-department-url="{% url 'ajax_load_departments' %}"  data-person-url="{% url 'ajax_load_persons' %}" novalidate enctype="multipart/form-data">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Submit report</legend>
                {{ form|crispy }}
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Report</button>
            </div>
        </form>
    </div>
    <script>
        $("#id_person").click(function () {
            var value = $("#id_report").val();
            var url = $("#PostForm").attr("data-person-url");
            $.ajax({                      
                url: url,    
                data: {
                'value': value,
                },
                success: function (data) { 
                    $("#id_person").html(data);  
                    console.log(data);
                }
            });
        });
    </script>
{% endblock content %}

我怎样才能只在我点击下拉菜单时运行它，而不是在我选择时运行它（然后它会再次运行，因为它是一次点击）。

forms.py

from django import forms
from .models import Post, File

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ['title', 'subject', 'person', 'report']

Answer 1

试试这个.change

<script>
    $("#id_person").change(function () {
        var value = $("#id_report").val();
        var url = $("#PostForm").attr("data-person-url");
        $.ajax({                      
            url: url,    
            data: {
            'value': value,
            },
            success: function (data) { 
                $("#id_person").html(data);  
                console.log(data);
            }
        });
    });
</script>