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

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;
}

上面是我用来获取 api 并将其显示在下拉选择菜单中的 javascript，问题是 api 替换了我在 html 代码中手动输入的每个选项标签。有什么建议么？干杯!

Answer 1

select 中只有一个option，作为占位符:

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

然后让 JavaScript 附加生成的 HTML，而不是替换当前的 HTML。

countriesList.innerHTML += options;