Welcome to Qi-U Community for programmer and developer-Open, Learning and Share

Categories

0 votes
480 views
in Technique[技术] by (31.9m points)

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

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

Please log in or register to answer this question.

1 Answer

0 votes
by (31.9m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Qi-U Community for programmer and developer-Open, Learning and Share
...