javascript - How do I get my code to display the flag corresponding to the country selected?

Question

I have got a select element in my HTML document. Nested within it are option elements. I’ve been trying to make my code display the flag corresponding to the country that has been selected by the user, but without much success so far. It might be worth mentioning that I’m using an API

const url = "https://restcountries.eu/rest/v2/all"
const select = document.querySelector("select");
const btn = document.getElementById("btn");

fetch(url)
  .then(function(response) {
    return response.json()
  })
  .then(function(data) {
    worldCountries(data)
    selectedCountry(data)
  })

function worldCountries(myData) {
  var myArray = []
  for (var i = 0; i < myData.length; i++) {
    myArray.push(myData[i].name)
  }


  var option = ""
  for (var i = 0; i < myArray.length; i++) {
    option += `<option value=${myArray[i].name}>${myArray[i]}</option>`
  }

  select.innerHTML = option;
}

function selectedCountry() {
  var x = select.selectedIndex;
  var y = select.options;
  console.log("country index is:" + y[x].index);
}

<img src="" alt="country-flag" width="500" height="600">
<select class="" name="" value="">

</select><br>

Answer 1

等待大神解答