javascript - Ajax DropDown 根据之前的下拉菜单填充

Question

我的 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 上预览脚本获得好主意。

任何如何使其发挥作用的建议都将受到高度赞赏。提前致谢。

Answer 1

例如，您可以在 $.each 调用后检查下拉列表的值(因为同步迭代数组)，而不是使用 setTimeout:

我想，是这样的:

$.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 %}
});

{% if get.zona is defined and get.zona != empty %}
    $('#zona').change();
{% endif %}