Как разместить заполнитель внутри ввода выбранного типа?

Question

У меня довольно странная проблема, и я просто не могу понять это. Итак, у меня есть форма, в которой пользователь выбирает, из какой страны он находится, и я хотел бы написать код в заполнителе, чтобы он выглядел лучше. Я подключил REST API, чтобы выбрать все страны мира и отобразить их как опции.

Я пробовал html <option value="" disabled selected>Choose Country...</option> и несколько других подобных. Я считаю, что это как-то связано с тем, как я кодировал javascript для получения API, но так как я новичок, я не слишком уверен.

// set up global variables
const countriesList = document.getElementById("country");
let countries; //contains fetched data list

//establish connection with API
fetch("https://restcountries.eu/rest/v2/all")
.then(res => res.json())
.then(data => initialize(data))
.catch(err => console.log("Error: " + err));


function initialize(countriesData) {
countries = countriesData;
let options = ""; //assign option vriable empty string

// loop each country and assign it to options variable
for(let i=0; i<countries.length; i++){
  options += `<option value= "${countries[i].name}"> ${countries[i].name} </option>`;
}
countriesList.innerHTML = options;
}

Выше приведен javascript, который я использовал для получения API и отображения его в выпадающем меню выбора, и проблема в том, что API заменяет каждый тег опции, который я вручную ввел в HTML-код. Какие-либо предложения? Ура!

Answer 1

Просто укажите один option в select, выступающий в качестве заполнителя:

<select id=country>
    <option value=''>Select...</option>
</select>

Затем JavaScript добавит сгенерированный HTML вместо замены текущего HTML.

countriesList.innerHTML += options;

Answer 2

Я поменял меньшую установку, которая тоже может помочь:

const createElements = async () => {
  const response = await fetch("https://restcountries.eu/rest/v2/all");
  const countries = await response.json();

  return countries.map(({ name }) => `<option value=${name}>${name}</option>`);
};

(async () => {
  document.getElementById("app").innerHTML = `
    <select>
      <option>select</option>
      ${await createElements()}
    </select>
  `;
})();

<div id="app"/>