Ajax下拉列表基于以前的下拉列表进行填充

我的js/ajax脚本有点问题。我正在学习js，目前我的知识是基本的。

我有一个由ajax填充的两个选择下拉列表，每个下拉列表都依赖于以前选择下拉列表中的数据。

1. "Provincia"->主选择下拉菜单
2. "Zona"->第二次选择-取决于"Provincia"的数据
3. "Municipio"->第三选择->取决于"Zona"的数据
4. "Barrio"->上次选择->取决于"Municipio"的数据

手动选择时，它们工作正常。但我试图在提交表格时选择停留时间。数据使用GET发送。

我试过这样的脚本，但当页面加载时间比Ajax脚本中指定的要长时，它确实能很好地工作

HTML:

<div class="row row_sep">
<div class="col-lg-12">
<div class="col-lg-2">
   <select name="prov" id="prov" class="form-control input-sm b_border">
    <option value="0">Provincia</option>
    {% for provincia in provincias %}
    <option value="{{ provincia.id }}" {% if get.prov == provincia.id %} selected  {% endif %} > {{ provincia.name }} </option>
    {% endfor %}
   </select>
</div>
<div class="col-lg-2">
 <select name="zona" id="zona" class="form-control input-sm b_border">
   <option value="0">Zona</option>
 </select>
</div>
<div class="col-lg-2">
 <select name="city" id="city" class="form-control input-sm b_border">
   <option value="0">Municipio</option>
 </select>
</div>
<div class="col-lg-2">
 <select name="barrio" id="barrio" class="form-control input-sm b_border">
  <option value="0">Barrio</option>
 </select>
</div>
</div>
</div>

JS/AJAX:

<script>
$( document ).ready(function() { if ($('#prov').val() != "0") $('#prov').change() });
$('#prov').on('change', function() {
    var self = $(this);
    $.ajax({
        url: "{{ baseUrl }}/ajax-prov",
        type: 'GET',
        data: { id: self.val() },
        dataType: 'json',
        success: function(response){
            console.log(response);
            var $zona = $("#zona");
            $zona.empty(); // remove old options
            var $city = $("#city");
            $city.empty(); // remove old options
            var $barrio = $("#barrio");
            $barrio.empty(); // remove old options
            $("#zona").append('<option value="">Seleciona la Zona</option>');
            $.each(response.prov, function(i, state) {
                {% if get.zona is defined and get.zona != empty %}
                    if({{get.zona}} == state.id){
                        $("#zona").append('<option value="'+ state.id +'" selected>' + state.name + '</option>');
                    }else{
                        $("#zona").append('<option value="'+ state.id +'">' + state.name + '</option>');
                    }
                {% else %}
                    $("#zona").append('<option value="'+ state.id +'">' + state.name + '</option>');
                {% endif %}
             });
            //$("#zona").append('<option value="">' + response.res[0].name + '</div>');
        } 
    });
});
$( document ).ready(function() {
    setTimeout(function() {
        if ($('#zona').val() != "0") $('#zona').change() 
    }, 100);
});
$('#zona').on('change', function() {
    var self = $(this);
    $.ajax({
        url: "{{ baseUrl }}/ajax-zone",
        type: 'GET',
        data: { id: self.val() },
        dataType: 'json',
        success: function(response){
            var $city = $("#city");
            $city.empty(); // remove old options
            var $barrio = $("#barrio");
            $barrio.empty(); // remove old options
            $("#city").append('<option value="">Seleciona la Municipio</option>');
            $.each(response.zone, function(i, state) {
                {% if get.city is defined and get.city != empty %}
                    if({{get.city}} == state.id){
                        $("#city").append('<option value="'+ state.id +'" selected>' + state.name + '</option>');
                    }else{
                        $("#city").append('<option value="'+ state.id +'">' + state.name + '</option>');
                    }
                {% else %}
                    $("#city").append('<option value="'+ state.id +'">' + state.name + '</option>');
                {% endif %}
            });
            //$("#zona").append('<option value="">' + response.res[0].name + '</div>');
        }
    });
});
$( document ).ready(function() {
    setTimeout(function() {
        if ($('#city').val() != "0") $('#city').change() 
    }, 350);
});
$('#city').on('change', function() {
    var self = $(this);
    $.ajax({
        url: "{{ baseUrl }}/ajax-municipio",
        type: 'GET',
        data: { id: self.val() },
        dataType: 'json',
        success: function(response){
            var $city = $("#barrio");
            $city.empty(); // remove old options
            $("#barrio").append('<option value="">Seleciona el barrio</option>');
            $.each(response.barrio, function(i, state) {
                {% if get.barrio is defined and get.barrio != empty %}
                    if({{get.barrio}} == state.id){
                        $("#barrio").append('<option value="'+ state.id +'" selected>' + state.name + '</option>');
                    }else{
                        $("#barrio").append('<option value="'+ state.id +'">' + state.name + '</option>');
                    }
                {% else %}
                    $("#barrio").append('<option value="'+ state.id +'">' + state.name + '</option>');
                {% endif %}
            });
            //$("#zona").append('<option value="">' + response.res[0].name + '</div>');
        }
    });
});
$('#city').on('click', function() {
    var self = $(this);
    $.ajax({
        url: "{{ baseUrl }}/ajax-municipio",
        type: 'GET',
        data: { id: self.val() },
        dataType: 'json',
        success: function(response){
            var $city = $("#barrio");
            $city.empty(); // remove old options
            $("#barrio").append('<option value="">Seleciona el barrio</option>');
            $.each(response.barrio, function(i, state) {
                {% if get.barrio is defined and get.barrio != empty %}
                    if({{get.barrio}} == state.id){
                        $("#barrio").append('<option value="'+ state.id +'" selected>' + state.name + '</option>');
                    }else{
                        $("#barrio").append('<option value="'+ state.id +'">' + state.name + '</option>');
                    }
                {% else %}
                    $("#barrio").append('<option value="'+ state.id +'">' + state.name + '</option>');
                {% endif %}
            });
            //$("#zona").append('<option value="">' + response.res[0].name + '</div>');
        }
    });
});
</script>

我找不到让它发挥作用的好办法。你可以在网站上预览脚本http://mediainmuebles.es以获得好主意。

任何关于如何使其发挥作用的建议都将不胜感激。提前谢谢。