是否选择了第一个选项的jQuery Bug？

I have weird situation with Select2 plugins :

When, #state is changed, it will do ajax request to get list of #city. once #city is selected, it will do ajax request to get #area list.

if I select #city option number 2, 3, etc... it will trigger #area to get the list. but if I choose option number 1, none will happen.

but once, I choose option number 2, 3, etc... then go back to choose option number 1, then it will run ajax perfectly.

pic 1 : Badung (option #1) is selected for the first time, not trigerring AJAX to get #area

pic 2 : Bangli (option #2) is selected, it's trigerring AJAX to get #area

pic 3 : Back to Badung (option #1), now it's trigerring AJAX to get #area

here's my HTML structure :

<div class="row">
    <div class="col-sm-12">
      <div class="form-group form-group-default form-group-default-select2 required">
        <label class="">State</label>
        <select id="state" class="full-width" data-init-plugin="select2" name="state">
            <option select="selected"></option>

            <?
                for ($i = 0; $i < $num_propinsi; $i++) {
                    $value = $propinsi[$i]['province_id'];
                    $text = $propinsi[$i]['province'];
                    echo '<option value="'.$value.'">'.$text.'</option>';
                }
            ?>

        </select>
      </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
      <div class="form-group form-group-default form-group-default-select2 required">
        <label>City</label>
        <select id="city" class="full-width" data-init-plugin="select2" name="city" disabled>
        </select>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group form-group-default form-group-default-select2 required">
        <label>Area</label>
        <select id="area" class="full-width" data-init-plugin="select2" name="area" disabled>
        </select>
      </div>
    </div>
</div>

and here's my jquery :

<script>
    $(function() {

        $("#form-flogin").validate();

        $("#state").change(function() {
            $("#city").html("");
            $("#s2id_city").find("#select2-chosen-2").html("");
            $("#s2id_area").find("#select2-chosen-3").html("");
            $("#area").prop("disabled", true);
            $("#flogin-submit").prop("disabled", true);
            var propinsi = $("#state").val();

            $.ajax({
                url: "controller/ctrl.getcityarea.php?req=city&val="+propinsi,
                dataType: "JSON",
                success: function(json){

                    var city = "";
                    $.each(json, function(i,o){
                        city += "<option value="+o.id+">"+o.city_name+"</option>";
                    });

                    $("#city").append(city);

                    event.preventDefault();             
                    $("#city").prop("disabled", false);
                }
            })
        });

        $("#city").change(function() {
            $("#area").html("");
            $("#s2id_area").find("#select2-chosen-3").html("");
            var city = $("#city").val();

            $.ajax({
                url: "controller/ctrl.getcityarea.php?req=area&val="+city,
                dataType: "JSON",
                success: function(json){

                    var area = "";
                    $.each(json.rajaongkir.results, function(i,o){
                        area += "<option value="+o.subdistrict_id+">"+o.subdistrict_name+"</option>";
                    });

                    $("#area").append(area);

                    event.preventDefault();
                    $("#area").prop("disabled", false);
                }
            });
        });

        $("#area").change(function() {
            event.preventDefault();
            $("#flogin-submit").prop("disabled", false);
        });
    })
</script>

any idea why .change method is not working on first attempt? but works on next attempt. thank you for your help