Ajax DropDown根据以前的下拉列表填充

Question

我的js / ajax脚本有点问题。我现在正在学习js，而且我的知识基本上是基础。

我有一些由ajax填充的选择下拉列表，每个下拉列表取决于之前选择下拉列表中的数据。

1. ＆＃34;省报＆＃34; - ＆GT;主要选择下拉列表
2. ＆＃34;卵＆＃34; - ＆GT;第二选择 - 取决于来自＆＃34; Provincia＆＃34;
的数据
3. ＆＃34; MUNICIPIO＆＃34; - ＆GT;第三选 - ＆gt;取决于＆＃34; Zona＆＃34;
的数据
4. ＆＃34;巴里奥＆＃34; - ＆GT;最后选择 - ＆gt;取决于来自＆＃34; Municipio＆＃34;
的数据

手动选择时，它们工作正常。但我在提交表格时试图让选择停留。数据使用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 %}