Htykuut

I'm using meterializecss with jquery and ajax. If selects change, then is ok. But if change "id_employer", and "id_address" has one option, "id_position" not load. And if change "id_employer", "id_address" is load, but "id_position" not load.
If page is refresh, all loads fine. Thanks for help.

<select id="id_employer">

  <option></option>

</select>



<select id="id_address">

  <option></option>

</select>



<select id="id_position">

  <option></option>

</select>



<script>

$('#id_address').formSelect();

$(function(){

  $("#id_employer").change(function(){

    $.ajax({

      url: "{% url 'work:load_addresess' %}",

      dataType: 'json',

      async: false,

      data: {employer: $(this).val()},

      success: function(j) {

        $('#id_address').empty();

        var select = $("#id_address")

        $.each(j, function(key, value) {

          $(select).append($("<option></option>").attr("value", key).text(value));

        });

        $('#id_address').formSelect();

      }

    });

  });

  $('#id_employer').trigger('change');



  $("#id_address").change(function(){

    $.ajax({

    url: "{% url 'work:load_positions' %}",

    dataType: 'json',

    async: false,

    data: {address: $(this).val()},

    success: function(j) {

      $('#id_position').empty();

      var select = $("#id_position")

      $.each(j, function(key, value) {

        $(select).append($("<option></option>").attr("value", key).text(value));

      });

      $('#id_position').formSelect();        }

    });

  });

  $('#id_address').trigger('change');

});

</script>