JSFiddle - React, Tailwind, and code Playground

HTML

<button id='find-btn'>Find closest city</button>
<br />
<div id='out'></div>
<select id='cities'>
  <option selected></option>
  <option value='35.6,139.6'>Tokyo</option>
  <option value='52.5,13.3'>Berlin</option>
  <option value='-33.8,151.2'>Sydney</option>
  <option value='40.2,-47'>New York City</option>
</select>

JavaScript

var cities = document.getElementById('cities').children;
// convert to radians
function deg2rad(val) {
  return val * Math.PI / 180.0;
}
// compute distance in kilometers: https://stackoverflow.com/a/365853/6608706
function distance(lat1, lon1, lat2, lon2) {
  var earthRadiusKm = 6371, //km
      dLat = deg2rad(lat2 - lat1),
      dLon = deg2rad(lon2 - lon1);
  lat1 = deg2rad(lat1);
  lat2 = deg2rad(lat2);
  var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
      Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  return earthRadiusKm * c; //km
}
// gets index of closest city
function findClosest(lat, lon) {
  var idx = 1,
      dist = 50000,
      tdist,
      latlon, i;
  for (i = 1; i < cities.length; i++) {
    latlon = cities[i].value.split(',')
    tdist = distance(lat, lon, +latlon[0], +latlon[1]);
    if (tdist < dist) {
      dist = tdist;
      idx = i;
    }
  }
  return idx;
}
// find our position
function findMe() {
  var out = document.getElementById('out');
  if (!navigator.geolocation) {
    out.innerHTML = '<p>Geolocation is not supported by your browser</p>';
    return;
  }

  function success(position) {
    var c = position.coords;
    var keys = Object.keys(position);
    var idx = findClosest(c.longitude, c.latitude);
    out.innerHTML = '<p>You are at longitude=' + c.longitude + ', latitude=' + c.latitude +
      '<br/><br/>You are closest to: </p>';
    cities[0].selected = false;
    cities[idx].selected = true;
  }

  function error() {
    out.innerHTML = 'Unable to retrieve your location';
  }
  out.innerHTML = '<p>Locating…</p>';
  navigator.geolocation.getCurrentPosition(success, error);
}

document.getElementById('find-btn').addEventListener('click', findMe);