Javascript 如何在选择类型输入中放置占位符？

我有一个很奇怪的问题，我就是想不出来。因此，我有一个表单，用户可以选择他们来自哪个国家，我想在一个占位符中编码，以使它看起来更好。我已经连接了一个RESTAPI来获取世界上所有的国家并将它们显示为选项

我尝试了

html选择国家…

和其他一些类似的方法。我相信这与我编写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;
}

//设置全局变量
const countriesList=document.getElementById（“国家”）；
让国家//包含获取的数据列表
//与API建立连接
取回（“https://restcountries.eu/rest/v2/all")
.then（res=>res.json（））
.然后（数据=>初始化（数据））
.catch（err=>console.log（“Error:+err”）；
函数初始化（countriesData）{
国家=国家数据；
let options=”“；//分配选项可变空字符串
//循环每个国家/地区并将其指定给选项变量
对于（设i=0；i仅在
选择
中有一个
选项
，用作占位符：

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

我重构了一个较小的设置，这可能也会有所帮助：


const createElements=async（）=>{
const response=等待获取（“https://restcountries.eu/rest/v2/all");
const countries=wait response.json（）；
返回国家.map（（{name}）=>`${name}`）；
};
（异步（）=>{
document.getElementById（“应用”）.innerHTML=`
选择
${wait createElements（）}
`;
})（）；
太好了。如果您认为答案解决了您的问题，请接受。
countriesList.innerHTML += options;