selectボックスで選択した値と同じものをAPIの変数に代入し、グラフを再読み込み。

selectボックスで選択した都市名の気温のデータがchart.jsのグラフに都度都度反映されるようにしたい。(selectボックスで大阪を選択したら、大阪のグラフが現れるようにしたい。）変数に選択した都市を代入するようにしたらできると思ったのですがうまくいきません。ご教授いただけると幸いです。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</head>

<body>
  <h2 id="title">5日間の天気:東京</h2>
  <p>都市名:
    <select id="city" name="city">
      <option value="0" selected="selected">東京都</option>
      <option value="1">大阪府</option>
      <option value="2">福岡市</option>
      <option value="3">ニューヨーク</option>
      <option value="4">ロンドン</option>
      <option value="5">リオデジャネイロ</option>
      <option value="6">シドニー</option>
      <option value="7">ヨハネスブルグ</option>
    </select>
  </p>
  <script src="js/script.js"></script>
  <!-- chart.js -->
  <canvas id="myChart"></canvas>

  <script>
    // XMLHttpRequestオブジェクトの作成
    var request = new XMLHttpRequest();
    // URLを開く
    let cities = ["Tokyo,JP", "Osaka,JP", "Fukuoka,JP", "New York,USA", "London,Uk", "Rio de Janairo,Brazil",
      "Sydney,Australia", "Johannesburg,Republic of South Africa"
    ]
    let city = cities[0];
    $('#city').change(function () {
      var r = $('option:selected').val();
      console.log(r);
      if (r == 1) {
        var request = new XMLHttpRequest();
        let city = cities[1];
        request.open('GET',
          `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${apiid}&lang=ja&units=metric`,
          true);
        request.responseType = 'json';
        request.send();
        console.log(city);
      };
    });


    let apiid = "***********"
    request.open('GET',
      `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${apiid}&lang=ja&units=metric`,
      true);
    request.responseType = 'json';
    // レスポンスが返ってきた時の処理を記述
    request.onload = function () {
      // レスポンスが返ってきた時の処理
      var data = this.response;
      document.getElementById('title').innerHTML = `<h2>5日間の天気:${data.city.name}</h2>`;
      console.log(data);
      console.log(data.city.name);
      console.log(data.list[0].dt_txt);
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: [`${data.list[0].dt_txt}`, `${data.list[8].dt_txt}`, `${data.list[16].dt_txt}`,
            `${data.list[24].dt_txt}`, `${data.list[32].dt_txt}`
          ],
          datasets: [{
            label: `${data.city.name}`,
            data: [`${data.list[0].main.temp}`, `${data.list[8].main.temp}`, `${data.list[16].main.temp}`,
              `${data.list[24].main.temp}`, `${data.list[32].main.temp}`,
            ],
            backgroundColor: "rgba(153,255,51,0.4)"
          }]
        }
      });
    };
    // リクエストをURLに送信
    request.send();
  </script>

</body>

</html>