Trigger changes using values ​​from the API.

Question

I'm working on a project where I need to get the current coordinates and save them as variables and then send these parameters to GeoNames to get the country code. This country code will be used to trigger a change event on a dropdown menu (previously populated with the country code as a value) that will display the borders of a country (using geoJSON). If I actually click on any country on the menu it works fine, but after I get the code from the GeoNames I can't fire the change event. The problem arises whenever I add this line of code after getting the country code.

$('#countrySelect').val('currCode').change();

In addition to not working, I also get this error: Map.js:291 Uncaught Error: Bounds are not valid.

Does anyone know what I'm doing wrong? (I'm using php for decoding and I'm getting the map from leaflet).

Here are the details:

This code is used to populate the drop-down menu:

;

$.ajax({
  url: "libs/php/geoJson.php",
  type: "POST",
  dataType: "json",

    success: function(result) {
      //console.log(result);
      
      for (var i=0; i<result.data.border.features.length; i ) {
          $('#countrySelect').append($('<option>', {
              value: result.data.border.features[i].properties.iso_a3,
              text: result.data.border.features[i].properties.name,
              }));
         }
      }
  });

This will create the borders (and it works fine) when countries are selected manually.

var border;

$('#countrySelect').on("change", function() {
  let name = $('#countrySelect').val();
  //get show border
 $.ajax({
     url: "libs/php/geoJson.php",
     type: 'POST',
     dataType: 'json',
     success: function(result) {
      const filterData = result.data.border.features.filter((a) => (a.properties.iso_a3 === name));
      border = L.geoJSON(filterData[0]).addTo(map);
      map.fitBounds(border.getBounds());
      },
  });
});

This part of the code tries to get the coordinates (which seems to work fine), pass them to GeoNames to get the country code (which also seems to work fine), and then fires the change event mentioned above (but this part doesn't work).

navigator.geolocation.getCurrentPosition(success);

function success(position) {
let lat = position.coords.latitude;
let lng = position.coords.longitude;
let coords = {"lat": lat, "lng": lng};

 //AJAX request with coords to geoNames to get country code

$.ajax({
  url: "libs/php/getCurrentCode.php",
  type: "POST",
  dataType: "json",
  data: coords,

  success: function(result) {
    console.log(JSON.stringify(result));
    if (result.status.name == "ok") {
      $(result["data"]["countryCode"]);
      let currCode = result.data;
      console.log(currCode);

  //trigger change with retrieved code

  $('#countrySelect').val('currCode').change();   
            };
    };
  });
};

我的 php:

ini_set('display_errors', 'On');
    error_reporting(E_ALL);

    $executionStartTime = microtime(true);

    $url='http://api.geonames.org/countryCodeJSON?&lat=' . $_REQUEST['lat'] . '&lng=' . $_REQUEST['lng'] . '&username=&style=full';

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_URL,$url);

    $result=curl_exec($ch);

    curl_close($ch);

    $decode = json_decode($result,true);    

    $output['status']['code'] = '200';
    $output['status']['name'] = 'ok';
    $output['status']['description'] = 'success';
    $output['status']['returnedIn'] = intval((microtime(true) - $executionStartTime) * 1000) . ' ms';
    $output['data'] = $decode['countryCode'];
    //var_dump($decode);        

    header('Content-Type: application/json; charset=UTF-8');

    echo json_encode($output);

Answer 1

$('#countrySelect').val('currCode').change();

This will set the value to the literal string currCode. You want to set it to the value in the variable currCode. In order to do this, remove the quotes:

$('#countrySelect').val(currCode).change();