Javascript Jquery对调用api的OnChange事件应用回调

您好，我正在尝试应用回调来在我的动态选择框上使用，而不是超时

目前我有4个选择选项框（3个是动态选项）：城市、地区（基于城市选项的选项）、病房（基于地区选项的选项）和街道（基于地区选项的选项）

这是一个搜索表单，因此下一页表单应该具有上一个表单值，我使用Django确定是否选择了上一个表单值，如果选择了，它将在模板中添加一个id=“value filter”的隐藏div。现在我使用Jquery检查该div是否存在，以更改select选项

如果用户单击城市选项，则将激活city onchange事件以调用api，该api使用相应的城市Id填充地区选项，病房和街道选项相同，但基于地区选项调用其api以填充其选项

$（文档）.ready（函数（）{
//如果选择了城市选项，则调用地区api
$（'select#city'）。更改（函数（事件）{
$.getJSON（“/api\u get\u districts/”{
id:$（this.val（））
}，功能（j）{
变量选项='--District--'；
对于（变量i=0；i

Tỉ新罕布什尔州
--城市--
哈恩ộ我
Hồ 奇明
Bình Dư417; ng
Đẵng
Hả我是Phòng
龙安
比尔ị一个Vũng Tũu
安江
Bắ江志强
Bắc KạN
Bạc Liêu
Bắc宁
Bến-Tre
BìnhĐị新罕布什尔州
Bình PhướC
Bình ThuậN
卡莫
Cần Thơ
曹Bằng
ĐắKLắK
Đắ科宁
Điện Biên
Đồ吴奈
Đồ吴萨普
嘉莱省
哈江
哈南
哈坦
Hả我很高兴
Hậ吴江
Hòa Bình
亨金
哈恩哈尼亚
基恩江
康图姆
赖丘
L–mĐồng
Lạ吴思恩
蔡丽欧
纳姆ị新罕布什尔州
Nghệ 一
宁比恩
宁寿ậN
普思ọ
费恩
瞿ảng Bình
瞿ả吴南
瞿ảngãi
瞿ả吴宁
瞿ảng Trị
索克·特隆
塞恩拉
泰宁
塔伊·博恩
塔伊·恩圭恩
Thanhóa
Thừ阿廷胡ế
钛ề安江
特拉荣
Tuyên Quang
文龙
Vĩnh Phúc
伊恩·巴伊
地区
--地区--
病房
--病房--
街头
--街头--
我决定只使用普通回调，并在检查中添加请求api函数：

if ($('#city-filter').length) {
    $('select#city').val("{{ filter_form_values.city |safe }}").change();
}
if ($('#district-filter').length || $('#ward-filter').length || $('#street-filter').length) {
    $.getJSON("/api_get_district/", {
        id: "{{ filter_form_values.city |safe }}"
    }, function(j) {
        var options = '<option selected disabled>-- District --</option>';
        for (var i = 0; i < j.length; i++) {
            options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
        }
        $("select#district").html(options);
        $('select#district').val("{{ filter_form_values.district |safe }}").change();
        if ($('#ward-filter').length) {
            $.getJSON("/api_get_ward/", {
                id: "{{ filter_form_values.district |safe }}"
            }, function(j) {
                var options = '<option selected disabled>-- Ward --</option>';
                for (var i = 0; i < j.length; i++) {
                    options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
                }
                $("select#ward").html(options);
                $('select#ward').val("{{ filter_form_values.ward |safe }}").change();
            });
        }
        if ($('#street-filter').length) {
            $.getJSON("/api_get_street/", {
                id: "{{ filter_form_values.district |safe }}"
            }, function(j) {
                var options = '<option selected disabled>-- Street --</option>';
                for (var i = 0; i < j.length; i++) {
                    options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
                }
                $("select#street").html(options);
                $('select#street').val("{{ filter_form_values.street |safe }}").change();
            });
        }
    });
}

if（$（'#城市过滤器'）.length）{
$（'select#city'）.val（“{{filter_form_values.city | safe}}”）.change（）；
}
如果（$（“#地区过滤器”）.length（“#沃德过滤器”）.length（“#街道过滤器”）.length（“#街道过滤器”）.length）{
$.getJSON（“/api\u get\u district/”{
id:“{filter_form_values.city | safe}”
}，功能（j）{
变量选项='--District--'；
对于（变量i=0；i

还将城市检查添加到html：

<div id="city-filter" style="display: none"></div>



现在工作了，但是我会提出任何建议来改进它（因为调用API 2次不是一个好主意）！p>