I'm having some confusion with loading a list of cities in to a dropdown list using javascript

I am trying to create a simple weather app that asks for the country and then city which then shows the weather for the chosen city.

I've fallen at the first hurdle in that I can't get the cities to load. I'm trying to load the list of cities from a html file that contains a list of cities (I have four different html files which contain the cities in England/Scotland/Wales/Northern Ireland). I can select the country but the cities list doesn't load. Any suggestions would be greatly appreciated.

This is the javascript (the only bit relevant to my current hurdle is the first 3 lines:

$(document).ready(function() {
  $('#countries').change(function() {
    $('#cities').load($(this).val() + '.html');
  });
  $('#cities').change(function() {
    var cityWeather = $(this).val();
    var city = $('#cities option:selected').text();
    var apiUrl = 'https://api.openweathermap.org/data/2.5/forecast?id=524901&APPID=798c9a98f7fc15df80c7e21268f57941'
    cities = '' + cityWeather

    $.ajax({
      url: apiUrl,
      type: 'GET'
      dataType: 'json'
      success: function(response) {
        console.log(JSON.stringify(response));
      }
      error: function() {

      }
    });
  });
});

This is the HTML for reference:

<!DOCTYPE html>
<html>
<head>
    <title>Weather App</title>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="apiweather.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <header>
        <h1>Weather App</h1> 
    </header>
    <section>
        <select id = "countries">
            <option selected>Select a Country</option>
            <option value="england-cities">England</option>
            <option value="scotland-cities">Scotland</option>
            <option value="wales-cities">Wales</option>
            <option value="nireland-cities">Northern Ireland</option>
        </select>

        <select id = "cities">
            <option selected><< Please Select</option>
        </select>
        <div id = "info"><div>

    </section>
    <footer>
    </footer>
</body>
</html>

and finally this is an example of a html list I'm dealing with:

<option>Select a City</option>
<option>Aberdeen</option>    
<option>Dundee</option>      
<option>Edinburgh</option> 
<option>Glasgow</option>     
<option>Inverness</option> 

Any suggestions or resources are greatly appreciated!