select2 'change' event doesn't trigger for the first time click #5736

<div class="form-group">
     <select class="form-control input-style ff-h" id="city">
          <option disabled selected value>Choose city</option>
     </select>
     <div class="text-danger" id="cityError" style="display: none;"></div>
<div class="form-group">
     <select class="form-control input-style ff-h" id="pincode">
           <option disabled selected value>Choose pincode</option>
      </select>
      <div class="text-danger" id="pincodeError" style="display: none;"></div>
$(document).on("change blur", "#city", function(){
        var city = $("#city").val();
        if(city == null){
          $("#cityError").html("Please provide city")
          $("#cityError").show();            
        }else{
          $("#cityError").hide();
          $('#pincode').empty();
          let url = "https://api......./"+"get_pincodes_on_city_basis";
            $.ajax({
              type: 'GET',
              url: url,
              data: {
                city: city,
                landing_page: true
              success: function(resultData) {
                var numbers = resultData.sort();
                 $('#pincode').select2({data: numbers, tags: true});
              error:function(data){
                console.log("Errordata: ", data);